将固定元素放在浏览器的滚动条上方

Red*_*ohn 2 css google-chrome scrollbar

基本上,我想显示一个覆盖div,它涵盖了页面上的所有内容,包括滚动条.

固定元素是否可能出现在页面的滚动条上方?我尝试将滚动条的z-index设置为-1,但显然不起作用.

小智 5

这是不可能的,但一个简单的替代方法是关闭body元素上的滚动条,并将它们引入内部元素中.

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;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<html>
    <body>
        <div class='content-wrapper'>
            <!-- put your content here -->
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

现在,您的页面看起来与以前完全相同,但您可以将元素放在滚动条的顶部.

这是一个例子.