Placing a fixed element above browser's scrollbar

Question

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

Answer 1

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:

Now your page will look exactly the same as before, but you can put elements on top of the scrollbar.

Here is an example.