Итак, у меня есть проблема, которая, как мне кажется, довольно распространена, но мне еще предстоит найти хорошее решение. Я хочу, чтобы оверлейный div покрывал ВСЮ страницу ... НЕ только область просмотра. Я не понимаю, почему это так сложно сделать ... Я пробовал установить body, html heights на 100% и т.д., но это не работает. Вот что у меня есть на данный момент:
<html>
<head>
<style type="text/css">
.OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative;">
<div style="height: 100px; width: 300px; background-color: Red;">
</div>
<div style="height: 230px; width: 9000px; background-color: Green;">
</div>
<div style="height: 900px; width: 200px; background-color: Blue;"></div>
<div class="OverLay">TestTest!</div>
</div>
</body>
</html>
Я также был бы открыт для решения на JavaScript, если оно существует, но я бы предпочел просто использовать простой CSS.