0

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

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

我尝试添加位置：相对于侧边栏，和位置：绝对到 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>
4

2 回答 2

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完全不需要使用绝对定位。

于 2012-06-21T13:53:23.363 回答
1

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

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

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

希望这可以帮助。

于 2012-06-21T13:58:04.243 回答