diff --git a/css/xterm.css b/css/xterm.css
index 3ae486c4..913cdb99 100644
--- a/css/xterm.css
+++ b/css/xterm.css
@@ -181,7 +181,7 @@
 
 .xterm-decoration-scrollbar {
     z-index: 7;
-    position: fixed;
+    position: sticky;
     top: 0px;
     right: 0px;
     width: 50px;
@@ -189,6 +189,5 @@
 
 .xterm-decoration-scrollbar.demo-scrollbar {
   height: 436px;
-  left: 872px;
-  top: 83px;
+  z-index:10;
 } 
diff --git a/demo/client.ts b/demo/client.ts
index 7eb9247a..f7de9692 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -553,8 +553,9 @@ function addDecoration() {
 }
 
 function addScrollbarDecoration() {
-  document.querySelector('.xterm-decoration-scrollbar').classList.add('demo-scrollbar');
-  term.registerDecoration({marker: term.addMarker(1), scrollbarDecorationColor: 'red'});
+  document.querySelector('.xterm-decoration-scrollbar')?.classList.add('demo-scrollbar');
+  const scrollbarDecorationCanvas = term.registerDecoration({marker: term.addMarker(1), scrollbarDecorationColor: 'red'});
+  scrollbarDecorationCanvas.element!.style.left = `${scrollbarDecorationCanvas.element!.nextElementSibling!.clientWidth + 89}px`;
   term.registerDecoration({marker: term.addMarker(3), scrollbarDecorationColor: 'green'});
   term.registerDecoration({marker: term.addMarker(5), scrollbarDecorationColor: 'blue'});
 }