Я понимаю, что отвечаю так долго, очень долго после того, как об этом спросили, но я приземлился здесь после краткого упоминания этой проблемы, и ни один из текущих ответов не является правильным.
Вот правильный ответ:
body {
position: relative;
}
Вот и все! Теперь ваш элемент будет расположен относительно <body>, а не в области просмотра.
Я бы не стал беспокоиться о position: fixed, так как его поддержка браузера остается нечеткой. Safari до iOS 5 вообще не поддерживал его.
Обратите внимание, что ваш элемент <div> будет закрывать рамку <body> (box + padding + border), но не будет покрывать ее поле. Компенсируйте, устанавливая отрицательные позиции на вашем <div> (например, top: -20px), или удаляя маржу <body>.
Я бы также порекомендовал установить <body> в height: 100%, чтобы гарантировать, что у вас никогда не появится частично замаскированное окно просмотра на более короткой странице.
Два действительных пункта взяты из предыдущих ответов. Как говорит Бен Бланк, вы можете потерять декларации width и height, расположив все четыре угла. И Mercator прав, что вы должны использовать идентификатор вместо класса для такого важного отдельного элемента.
Это оставляет следующий рекомендуемый полный CSS:
body {
position: relative;
margin: 0;
}
#screenMask {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity=70);
visibility: hidden;
}
И HTML:
<body>
<div id="screenMask"></div>
</body>
Надеюсь, это поможет кому-то еще!