set div full screen even when scroll the page

Question

I want to set #bodyHider full screen. I tried this code:

#bodyHider{
    position:absolute;
        width:100%;
    height:100%;
    background:#000;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    z-index:10000;
}

the HTML code:

<div id="bodyHider"></div>

It worked, but when I scroll down, I see #bodyHider is at the top of the page. I want this div whole screen even if I scroll the page.

Answer 1

This is what you want.

#bodyHider{
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    background:#000;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    z-index:10000;
}