Basically, I want to show an overlay div that covers everything on the page, including the scroll-bars.
Is it possible for a fixed element to appear above the page's scroll-bars ? I tried setting the z-index of the scroll-bars to -1, but apparently doesn't work.
No, html elements cannot render over the browser chrome (scroll bars, etc).
For more information on how pages are rendered, read this article Web Browser Engine
Also with Z-index, the lower numbers are behind objects with higher numbers. More or less, for more detail see the CSS spec
It's not possible, but a simple alternative is to turn off the scrollbars on the body element and introduce them in an inner element instead.
css:
/* these three elements are sized to fit the screen */
html, body, .content-wrapper {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow-y: hidden; /* no scrollbars on the body */
}
/* this element gets the scrollbars */
.content-wrapper {
overflow-y: auto;
}
html:
<html>
<body>
<div class='content-wrapper'>
<!-- put your content here -->
</div>
</body>
</html>
Now your page will look exactly the same as before, but you can put elements on top of the scrollbar.
Here is an example.
