请告诉我如何实现这一点，我还没有做过这样的自适应。很难不知道。)
如何处理块（与文本底部的块）以使其始终处于同一水平？
在粉红色区域，这就是它应该的样子。在不同的设备上，他上下移动。这是我的问题。
我把标题放在位置：固定；它应该永远是。
按钮也在位置：固定；它应该与带有文本的块有一段距离。
这个块在位置上有文字：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>
有必要为主屏幕制作一个通用框。
在其中“按类别”放置单独的块 - 标题，中心部分和带有商品“鱼文本在哪里”的块。
对于前两个块，指定
flex: 1;最后一个块flex: 0;。标题在样式中具有自己的高度（以绿色突出显示），如果您查看flex: 1，它占据了屏幕的三分之一。
带有商品“鱼文在哪里”的区块由主区块组成，其中
flex: 0;有两个区块。第一个是“鱼文”，第二个是商品。这两个块position: relative;有 为两个块设置所需的高度，然后我们将获得“鱼文本”块的所需高度和所需的高度，然后产品块从底部看多少，其余部分将隐藏在下面。``