I have a <div> element with position: absolute and z-index something big. I would like to cover the entire screen with this div with javascript. This is what I do and it works:

document.getElementById('mydiv').style.top = 0;
document.getElementById('mydiv').style.left = 0;
document.getElementById('mydiv').style.width = '100%';
document.getElementById('mydiv').style.height = '100%';

However, when I scroll down with long webpages, this code displays my div at the top of the page, so the div renders above the region I currently view. How can I change the top and left values so that my div always covers the active field I am viewing?

I work on firefox 3.6.*.

Thank you