Как расположить блок при адаптиве?
Подскажите пожалуйста как реализовать это, я не делал ещё подобного адаптива. Сложновато от незнания. )
Что сделать с блоком (тот что с низу с текстом) что-бы он находился всегда на одном уровне?
В розовой области это то, как нужно. На разных устройствах он ездит то выше, то ниже. Это проблема моя.
Шапку я поставил на position: fixed; она должна быть всегда.
Кнопку так-же на position: fixed; она должна быть на расстоянии от блока с текстом.
А этот блок с текстом на position: absolute;
По идее когда я начинаю скролить в низ, кнопка должна остаться на месте.
А вот этот длинный блок с текстом может уезжать в верх. (шапка обретает белый цвет и он под неё укатывается).
Я тут пример кода накидал
body {
overflow-X: hidden;
}
.box {
height: 100vh;
display: flex;
flex-direction: column;
}
.head {
position: fixed;
height: 70px;
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
top: 0;
left: 0;
z-index: 1;
}
.center {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
z-index: 2;
}
.box_text {
position: relative;
font-family: 'Lobster', cursive;
font-weight: 700;
font-size: 65px;
color: #fff;
text-align: center;
}
.box_link {
position: relative;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.link {
font-family: 'Lobster', cursive;
font-size: 25px;
color: #fff;
cursor: pointer;
outline: none;
border: none;
width: 208px;
height: 50px;
background-color: #f08b9891;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
}
.menu {
position: absolute;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
max-width: 1300px;
min-height: 300px;
margin: auto;
border-radius: 50px 50px 0 0;
z-index: 2;
}
.wrap {
flex: 1;
}
.img {
background-image: url(https://sun9-40.userapi.com/xjTDHjGgBeTSRSCLGGxEfxIjpjZwMDqrdnXoMw/ImCKCCXvj6M.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
a {
display: inline-block;
text-decoration: none;
color: #000;
}
ul {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
li {
display: flex;
justify-content: center;
}
.menu_text {
font-family: 'Lobster', cursive;
font-weight: 700;
font-size: 28px;
line-height: 34px;
text-align: center;
color: #000;
max-width: 663px;
margin-top: 25px;
margin-bottom: 25px;
}
.item_link {
font-family: 'Lobster', cursive;
font-weight: 500;
font-size: 18px;
line-height: 18px;
width: 170px;
height: 170px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-left: 30px;
padding-right: 30px;
transition: 0.1s;
border: 2px solid transparent;
}
.item_image {
background-image: url(https://sun9-73.userapi.com/PkzUW9XXy2w4Oof1LQOwvY9B3ftnDXJUcqezMA/t7FU55t8RMI.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 75px;
height: 75px;
margin: 10px;
}<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<div class="box">
<div class="wrap">
<div class="head"></div>
</div>
<div class="wrap">
<div class="center">
<div class="box_text">Аниме бложек</div>
<div class="box_link">
<a href="#" class="link">Кликай меня</a>
</div>
</div>
</div>
<div class="wrap">
<div class="menu">
<div class="menu_text">
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
</div>
<ul>
<li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li>
<li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li>
<li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li>
<li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li>
<li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li> <li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li> <li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li> <li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li> <li>
<a href="#" class="item_link">
<div class="item_image"></div>
Далеко-далеко
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="img"></div>Ответы (1 шт):
Нужно было сделать один общий бокс для главного экрана.
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
В него положить отдельные блоки "по категориям" шапка, центральная часть и блок с товарами "где рыбный текст".
Для первых двух блоков указать flex: 1; у последнего блока flex: 0;
У шапки своя высота указана в стилях (она выделена зелёным) а если смотреть по flex: 1 она занимает одну треть экрана.
Блоку с товарами "где рыбный текст" состоит из основного блока у которого flex: 0; и в нём лежат два блока. 1й это "рыбный текст", 2й это товары. У этих двух блоков position: relative;.
Обоим блокам задать нужную высоту, тогда мы будем иметь нужную высоту для блока "рыбный текст" и нужную высоту, то на сколько будет выглядывать с низу блок с товарами, остальная его часть будет скрыта ниже.``
