Question

我在div中包含了部分。我希望每个部分都是窗口的高度并且一个接一个地坐在页面上，我已经在div中实现了这一点。但是目前进程div位于文章div上，我希望进程div继续相同的流程，以便在文章div的最后一节之后我们看到进程div的第一部分。

这是HTML：

＆＃13;

    .window {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    
    .window:nth-child(1) {
      top: 0%;
    }
    
    .window:nth-child(2) {
      top: 100%;
    }
    
    .window:nth-child(3) {
      top: 200%;
    }

＆＃13;

<div class="articles">
         <section class="window">
         </section>
         <section class="window">
         </section>
    </div>
    <div class="process">
         <section class="window">
         </section>
         <section class="window">
         </section>
         <section class="window">
         </section>
    </div>

＆＃13;

Answer 1

您正在使用position: absolute，即为什么它表现得很奇怪，而不是将您的CSS更改为以下代码段。

此处vh为vh： 1/100视口高度或窗口高度的百分比。

代码段

＆＃13;

.window {
  width: 100%;
  height: 100vh;
  position: relative;
}

.window:nth-child(1) {
  background: red;
}

.window:nth-child(2) {
  background: green;
}

.window:nth-child(3) {
  background: blue;
}

＆＃13;

<div class="articles">
  <section class="window">articles 1
  </section>
  <section class="window">articles 2
  </section>
</div>
<div class="process">
  <section class="window">process 1
  </section>
  <section class="window">process 2
  </section>
  <section class="window">process 3
  </section>
</div>

＆＃13;

Answer 2

我能想到的唯一解决方案是用Z-Index订购它们并自己定义订单。

Answer 3

问题在于，绝对定位的元素根据第一个父级的位置来定位它们，即位置：relative。在您的案例或文章中，这两个过程都不相关。即使它们是，绝对位置使他们忽略了文档流程。基本上，当您对整个布局使用绝对位置时，您必须单独定位每个“.window”元素（顶部：500％，顶部：600％等）。

你的风格让它以这种方式运作：

每个.window都基于body元素定位（所以从顶部开始）
文章和流程因此在文件的顶部
不要忘记nth-child从第一个孩子开始为.articles孩子和.process孩子跑，所以每个父母的第一个.window都在顶部。

我认为你不应该使用position：absolute，而是通过javascript或jquery来设置高度。这样你就可以实现你想要的外观，元素将按照你期望的方式进行。

如果您不需要较旧的浏览器兼容性，您也可以使用vh单位的高度：

.window {
    position: relative;
    height: 100vh;
}

Answer 4

这就是你所需要的一切。使窗口相对，并为所有部分提供100vh

＆＃13;

requests.get(url, auth = authmethod)

＆＃13;

.window {
  width: 100%;
  position: relative;
}
section{
  height:100vh;
}

＆＃13;

部分绝对地相互叠加

4 个答案:

代码段