使用绝对和相对位置配置动态侧边栏答案

【问题标题】：Using absolute and relative position to configure a dynamic sidebar使用绝对和相对位置配置动态侧边栏
【发布时间】：2012-06-21 21:58:04
【问题描述】：

我对使用绝对定位和相对定位感到有些困惑。基本上我有一个侧边栏，其中大约有 4 个 div。

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

我尝试将 position: relative 添加到侧边栏，并将 position: absolute 添加到 div 3。这会将它放在侧边栏的正确位置，但它会使 div 3 与其他 div 重叠。

我在这里错过了什么？

任何困惑的人的布局：

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

【问题讨论】：

标签： css css-position

【解决方案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，完全不用绝对定位。

【讨论】：

我尝试使用 CSS，因为它实际上是 Drupal 侧边栏中的块，这比仅添加几行（更改主题模板移动块等）更难。不过，我还是要试一试。好答案+1

【解决方案2】：

我只是尝试使用可见性样式隐藏#div1,2,4，但它没有移动任何其他 div

看这里：http://jsfiddle.net/hq6LM/10/

这样做的原因是，如果您使用可见性设置样式，它仍然保留它的块属性，并且 div 不会向上移动，因为它们仍然不可见。

希望这会有所帮助。

【讨论】：

啊，但是您看看是否缺少，那么将没有任何实际内容可以使“可见”。如果它们只是被隐藏，那么这将是一个很好的解决方案。