css - 使用绝对和相对位置配置动态侧边栏

Question

我对使用绝对和相对定位有点困惑。基本上我有一个侧边栏，里面有大约 4 个 div。

我希望 div 3 始终位于每个页面上的相同位置，因为偶尔会缺少 div 1 或 div 2，这反过来又会拉动 div 3。

我在这里错过了什么？

---

布局让任何人感到困惑:

 <div id='sidebar'>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
        <div id='div4'></div>
 </div>

Answer 1

这就是绝对定位应该如何工作——绝对定位的元素从内容流中移除，并且不占用空间——所以它不能将元素向下推。

您将需要使用某种占位符，或者想出一些使用边距的东西。我不确定你的元素需要如何放置，但是，如果 div3 总是必须从顶部开始，比如说 400px，你为什么不这样做它像这样:

<div id='sidebar'>
    <div style="height:400px">
        <div id='div1'></div>
        <div id='div2'></div>
    </div>
    <div id='div3'></div>
    <div id='div4'></div>
</div>

这样就可以随意隐藏div1和div2，根本不需要使用绝对定位。