两个分区之间的关系

Relationship Between 2 Divs

本文关键字：之间 关系 分区 两个      更新时间：2023-09-26

想象一下div1和div2。div1的宽度为100%，高800px。div2固定在浏览器的顶部，也有100%的宽度，可能是3000px高。我正试图着陆，所以你可以看到div1，但当你向下滚动时，div1向上滑动，显示出div2及其所有内容。这看起来很容易，但我想不通。

div1 {
  width:100%;
  height: 800px;
  position: ???;
  z-index:100;
  background-color: white;
}

div2 {
    width:100%
    height: 3000px;
    position: fixed;
    background-color: black;
}

首先，您的示例代码有一些缺陷，例如错误的CSS选择器（除非您创建了名为"div1"的自定义标记等），div2CSS规则（width:100%）中缺少结尾;。您还需要将固定div定位在左/上0，以将其定位在移动div后面。

要使移动的div移动，请添加与其height大小相同的bottom margin，它将滚动到视线/视口之外。

这种技术有时被称为视差滚动，这里有一篇文章展示了如何/如何进行

.div1 {
  width:100%;
  height: 800px;
  position: relative;
  z-index:100;
  background-color: white;
  margin-bottom: 800px;
}
.div2 {
 top: 0;
 left:0;
 width:100%;
 height: 3000px;
 position: fixed;
 background-color: black;
 }
<div class="div1"></div>
<div class="div2"></div>

相关文章：