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)
现在,您的页面看起来与以前完全相同,但您可以将元素放在滚动条的顶部.
这是一个例子.