html - 如何使用CSS在同一页面中同时使用固定和相对位置属性？

Question

我在一个页面中使用了 3 个分区 (Div)，第一个 div 固定在页面顶部。

第二个和第三个div依次放在第一个div的下面。

问题是当我在第一个 div 中使用固定位置时意味着第二个 div 自动出现在第一个 div 之上，我需要将第二个 div 放置在第一个 div 的底部。

当我滚动页面时，第一个应该在同一个地方(页面顶部)，其他两个 div 应该向上滚动到第一个之后。

下面是我当前的代码。

<div id="first" style="position: fixed; height: 100px; width:100%;">asdfgh</div>
<div id="second" style="position: relative; height: 500px; width:100%;">zxcvbn</div>
<div id="third" style="position: relative; height: 200px; width:100%;">qwerty</div>

Answer 1

固定 div 的作用类似于绝对位置 div，因此您必须为第二个 div 指定边距。喜欢:

<div id="first" style="position: fixed; height: 100px; width:100%;">asdfgh</div>
<div id="second" style="height: 500px; margin-top: 100px">zxcvbn</div>
<div id="third" style="height: 200px;">qwerty</div>

如果是静态 div，则 Div 会自动设置 100% 宽度。