diff --git a/css/xterm.css b/css/xterm.css
index 2746016b58..b14a6cf5ba 100644
--- a/css/xterm.css
+++ b/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;
diff --git a/src/browser/decorations/BufferDecorationRenderer.ts b/src/browser/decorations/BufferDecorationRenderer.ts
index e195c5aeaa..fb77ce9cc3 100644
--- a/src/browser/decorations/BufferDecorationRenderer.ts
+++ b/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`;