问题
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.
回答1:
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
回答2:
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.
来源：https://stackoverflow.com/questions/16365320/placing-a-fixed-element-above-browsers-scrollbar