3

基本上，我想显示一个覆盖页面上所有内容的覆盖 div，包括滚动条。

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

4

2 回答 2

7

这是不可能的，但一个简单的替代方法是关闭 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;
}

html:

<html>
    <body>
        <div class='content-wrapper'>
            <!-- put your content here -->
        </div>
    </body>
</html>

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

这是一个例子。

于 2015-12-10T08:41:25.000 回答
2

不，html 元素不能在浏览器 chrome（滚动条等）上呈现。

有关如何呈现页面的更多信息，请阅读这篇文章Web 浏览器引擎

同样对于 Z-index，较低的数字位于具有较高数字的对象之后。或多或少，有关更多详细信息，请参阅CSS 规范

于 2013-05-03T18:27:32.750 回答