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以從頁面流中移除該元素。