get div to cover whole page even after scrolling down

Question

I have a div called 'alert' which is used in the same way as as the javascript alert() function. It covers the whole page until you scroll down, then the part of the page which was not previously visible is not covered. Is there a way to cover the whole page and not just the visible viewport? NB. I don't want to use position:fixed. this demo demonstrates what I mean. Thank you.

#alert{
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    background-color:rgba(187,201,247,0.5);
    z-index:3;
    text-align:center;
    font-size:20px;
}

Add to the parent `position:relative` - `body{position:relative}` — Vucko, Apr 20 '15 at 12:20

score 5 · Answer 1 · edited Apr 20 '15 at 12:47

5

CSS

html,body{
    position:relative;
}

#text{
    height:1000px;
}
#alert{
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    background-color:rgba(187,201,247,0.5);
    z-index:3;
    text-align:center;
    font-size:20px;
}

DEMO

edited Apr 20 '15 at 12:47

darthmaim

4,970
1
27
40

answered Apr 20 '15 at 12:23

Kawinesh S K

3,148
1
16
29

get div to cover whole page even after scrolling down

1 Answers1