I am currently working on a #cover
element with the following CSS styling:
#cover {
background-color: #FFFFFF;
height: 100%;
opacity: 0.4;
position: fixed;
width: 100%;
z-index: 9000;
}
The goal is to have it cover the entire visible page, but when I scroll down, I notice that there is an added margin of 8 pixels at the top and left.
Even after trying margin:-8 -8 8 8;
, the issue persists. Why is that? And how can this be fixed?
Here is a DEMO fiddle illustrating the problem.