Merge pull request #4516 from jeanp413/jp/fix-decoration-render-layer

Ensure decorations in the top layer render on top of decorations in the bottom layer

Author: Tyriar

css/xterm.css

@@ -179,8 +179,12 @@
 	position: absolute;
 }
 
+.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
+	z-index: 7;
+}
+
 .xterm-decoration-overview-ruler {
-    z-index: 7;
+    z-index: 8;
     position: absolute;
     top: 0;
     right: 0;

src/browser/decorations/BufferDecorationRenderer.ts

@@ -72,6 +72,7 @@ export class BufferDecorationRenderer extends Disposable {
   private _createElement(decoration: IInternalDecoration): HTMLElement {
     const element = document.createElement('div');
     element.classList.add('xterm-decoration');
+    element.classList.toggle('xterm-decoration-top-layer', decoration?.options?.layer === 'top');
     element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.css.cell.width)}px`;
     element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.css.cell.height}px`;
     element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.css.cell.height}px`;