Placing a fixed element above browser's scrollbar

后端未结

关注

 2  2045

再見小時候

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\'

相关标签:

2条回答

既然无缘

2021-01-15 05:36

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.

0 讨论(0)

攒了一身酷

2021-01-15 05:37

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

0 讨论(0)
发布评论:

提交评论
- 加载中...