diff --git a/css/xterm.css b/css/xterm.css
index 555632a6..b14a6cf5 100644
--- a/css/xterm.css
+++ b/css/xterm.css
@@ -179,7 +179,7 @@
 	position: absolute;
 }
 
-.xterm-screen .xterm-decoration-container .xterm-decoration.top-layer {
+.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
 	z-index: 7;
 }
 
diff --git a/src/browser/decorations/BufferDecorationRenderer.ts b/src/browser/decorations/BufferDecorationRenderer.ts
index 5d00d2ff..fb77ce9c 100644
--- a/src/browser/decorations/BufferDecorationRenderer.ts
+++ b/src/browser/decorations/BufferDecorationRenderer.ts
@@ -72,7 +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('top-layer', decoration?.options?.layer === 'top');
+    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`;