主页 / 问题 / 1609894
Accepted
iusevoidbtw
Asked:2025-04-05 15:07:59 +0000 UTC2025-04-05 15:07:59 +0000 UTC

如何实现这样的覆盖？

  • 772

我想要和https://sbermobile.ru一样的笑话

当您向下滚动时，第 2 部分与另一部分（第 1 部分）重叠，而当您向下滚动时，第 3 部分从文本下方出来。如何实现这一点？另外，问题是如何使各个部分的角都呈现相同的圆角，就像在 PC 上有一个圆角，在手机上有一个圆角一样。

我的网站结构如下

<html><head></head><body> 
<nav></nav> 
<section id="up">text1</section> 
<section id="center">text2</section> 
<section id="down">text3</section> 
<footer></footer></body></html>
  1. 其中 up 是 SberMobile 网站上的上部
  2. center - 进攻的中间位置
  3. 向下 - 从中​​心下面爬出来的下部
javascript

1 个回答

  1. Best Answer

    在解决方案中指定的页面上它用于position:sticky“抓取”元素。

    并将中心元素凸起z-index，使其更高。

    例子：

    section {
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#up {
  position: sticky;
  top: 0;
  background-color: red;
  height: 40vh;

}

#center {
  background-color: white;
  position: relative;
  z-index: 1;
}

#down {

  position: sticky;
  bottom: 0;
  background-color: green;
  height: 40vh;
}
    <nav><span>up</span> <span>center</span> <span>down</span></nav>
<section id="up">text1</section>
<section id="center">text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2</section>
<section id="down">text3</section>
<footer>Footer</footer>

    • 0

相关问题