Я очень расстроен, потому что продолжаю сталкиваться с одной и той же проблемой. Поэтому я прошу прощения за необходимость задать этот вопрос еще раз ...
Я хочу, чтобы на моем сайте были разные разделы и для этого использовались div-ы. По какой-то причине, когда я уменьшаю высоту моего браузера, разделы будут перекрываться. Так, например, я установил для средней секции (контейнер-контейнер 2) красный цвет фона, а для первой секции (контейнер-контейнер 1) - другой цвет, в этой первой секции у меня также есть некоторый текст-заполнитель. Когда я уменьшу высоту браузера, красный фон из раздела 2 будет продолжать перемещаться в мой первый раздел с текстом заполнителя. Я удалил весь контент из второго контейнера, но, очевидно, это еще большая проблема, когда у меня есть элементы во втором контейнере, потому что тогда не только фон, но и элементы из этого раздела будут перемещаться в мой первый раздел и перекрываться с содержимым из Первый раздел
Когда я вчера задал этот вопрос, проблема заключалась в том, что у меня была абсолютная позиция, но это уже не так. Я перепробовал все разные варианты позиционирования (flex, block, inline, inline block, absolute), но при изменении размера браузера это перекрытие происходит постоянно: (
Может кто-нибудь помочь мне ?? 1007 *
Вот мой код:
.Container1 {
height: 100vh;
width: 100%;
margin: 0;
background: rgb(74, 105, 113);
background: linear-gradient(90deg, rgba(74, 105, 113, 1) 0%, rgba(129, 161, 170, 1) 60%, rgba(181, 207, 214, 1) 100%);
text-align: center;
display: flex;
flex-direction: column;
}
.hp_slogan {
padding-top: 100px;
}
.showcase {
margin-top: auto;
}
/* Container2 Styling */
.container2 {
height: 100vh;
width: 100%;
background-color: red;
color: white;
display: block;
font-size: 16px;
}
<div class="Container1">
<div class="hp_slogan">
<div class="">
<?php
echo do_shortcode('[smartslider3 slider=19]');
?>
</div>
<p>Placeholder Text.</p>
</div>
<div class="showcase">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="container2">
</div>