Div重叠＆amp;错误的高度

Question

我有3个DIV。 2在父DIV内。

之类的东西

<div id="parent">    
    <div id=1>......</div>    
    <div id=2 style="position:relative;left:0px;top:-300px;">....</div>
</div>

如您所见，存在重叠。令人讨厌的是，父div在底部有一个巨大的空白区域。原因显然是因为父div没有减去重叠。

请你告诉我应该怎么做？

Answer 1

将position:relative更改为position:absolute，以从页面流中删除该元素。

Answer 2

为了清晰起见，请稍微扩展安德鲁的回答。如果使用position:relative，则会保留元素在页面上占用的空间（您看到的空白区域），然后移动元素。

使用position:absolute时，不会使用元素占用的空间（“从页面流中删除”）。但是，对于position:absolute，除非使用position:relative;top:0;left:0; CSS声明声明父div，否则该元素将不再绑定在父div中。

所以你会想要这样的东西：

<div id="parent" style="position:relative;top:0;left:0;">    
    <div id=1>......</div>    
    <div id=2 style="position:absolute;left:0px;top:-300px;">....</div>
</div>

我希望这有助于澄清一点点。仍然不确定这是否会给你你想要的确切外观，但从CSS规则的角度看它是正确的。