Есть значит у меня див с фоновым изображением в CSS. И внутри этого дива див с наложением цвета.
<div class="image">
<div class="image-overlay"></div>
</div>
.image {
width: 100%;
height: 100%;
background-image: url('../Images/headphoto.jpg');
position: relative; }
.image-overlay {
width: 100%;
height: 100%;
background: rgba(28,66,111,0.6);
position: relative;
}
А есть еще див с текстом, который должен отображаться поверх фонового изображения. Задаю ему такие параметры:
.text-block {
width: 300px;
height: 200px;
top: 362px; left: 0; bottom: 0; right: 0;
border: 2px solid black;
color: white;
margin: 0 auto;
position: absolute;}
Центрирую див и все нормально отображается. Но как только я увеличиваю или уменьшаю масштаб страницы (ctrl +; ctrl -), то див с текстом начинает выпадать. Он сохраняет свою позицию в центре относительно экрана. Но выходит за границы body.
Где моя ошибка? Как добиться того, чтобы див с текстом оставался на своей позиции несмотря ни на что и при этом отображался поверх фонового изображения?