Div重叠和错误高度

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在底部有一个巨大的空白空间。原因显然是因为父分区不减去重叠。

请问我该怎么办？

Answer 1

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

随着position:absolute，元素将占用的空间不被使用（“从页面流中移除”）。但是，与position:absolute，该元素不会被绑定在父div中，除非声明父div使用position:relative;top:0;left:0; CSS声明。

所以，你会想是这样的：

<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规则的角度来看，这是正确的。

Answer 2

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