html - 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 底部有一个巨大的空白。原因显然是因为父 div 没有减去重叠。

你能告诉我我应该怎么做吗？

Answer 1

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

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

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

<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从页面流中删除元素。