Div 重叠 &错误的高度 [英] Div overlapping & wrong height

问题描述

我有 3 个 DIV.2 在父 DIV 内.类似的东西

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

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

你能告诉我我该怎么做吗?

解决方案

为了清楚起见，稍微扩展 Andrew 的回答.如果您使用 position:relative 元素将在页面上占用的空间被保留(您看到的空白)，然后元素被移动.

使用position:absolute，元素本应占用的空间未被使用(从页面流中移除").但是，使用 position:absolute，元素将不再绑定在父 div 内，除非使用 position:relative;top:0;left:0; 声明父 div代码> CSS 声明.

所以你会想要这样的:

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

I have 3 DIVs. 2 are inside the parent DIV. something like

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

As you can see, there is an overlapping. The annoying thing is, the parent div has a huge white space at the bottom. The reason apparently is because the parent div doesn't minus the overlapping.

Would you please tell me what I should do?

解决方案

To expand on Andrew's answer a bit for clarity. If you use position:relative the space that element would take up on the page is preserved(the white space you are seeing) and then the element is moved.

With position:absolute, the space that element would have taken up is not used("removed from the flow of the page"). However, with position:absolute, the element will not be bound inside the parent div anymore either unless declaring the parent div with a position:relative;top:0;left:0; CSS declaration.

So you would want something like this:

<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>

I hope that helps to clarify a little bit. Still not sure if this will give you the exact look you are going for, but from a CSS rule perspective it is correct.

这篇关于Div 重叠 &错误的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！