位置相對絕對子女保證金錯誤？

任何人都可以解釋如何我可以防止兄弟div的邊緣影響另一個？從邏輯上講，我不明白爲什麼瀏覽器是這樣鋪設的。位置相對絕對子女保證金錯誤？

我試圖讓黃色方框具有相對於父項的頂部/左側，但帶有頁邊距的藍色框正在影響黃色方框。

section{ 
 
    position: relative; 
 
} 
 

 
div.options{ 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    display: inline-block; 
 
    background: #ff0; 
 
    padding: 50px; 
 
} 
 

 
div.content{ 
 
    height: 100px; 
 
    width: 100%; 
 
    background: #09c; 
 
    margin-top: 50px; 
 
}

<article> 
 
    <section> 
 
     <div class='options'> 
 
      
 
     </div> 
 
     <div class='content'> 
 
      <h1>hello world</h1> 
 
     </div> 
 
    </section> 
 
</article>

enter image description here

來源

2015-01-03 Timmerz

這是預期的行爲，您期望的結果是什麼？ – jmore009

你能解釋爲什麼會這樣嗎？孩子的利潤率正在適用於該部分，並將兩個孩子都調低。這是如何預期的？ – Timmerz

這被稱爲collapsing margins。

8.3.1 Collapsing margins

在CSS中，兩個或多個箱（這可能會或可能不會是兄弟姐妹）的相鄰邊緣可以結合起來，形成一個單一的餘量。據說這種方式相結合的利潤率將崩潰，並且由此產生的合併保證金被稱爲摺疊保證金。

一種解決方案是將父元素的overflow屬性設置爲默認值visible以外的值。

值如auto或hidden會產生預期結果。

（見上文使用其他辦法來解決此鏈接。）

Updated Example

section { 
    position: relative; 
    overflow: auto; 
}

更改overflow屬性的值建立一個新的塊格式化的內容。

9.4.1 Block formatting contexts

浮標，絕對定位元素，塊容器（如直列塊，表細胞，和表字幕）未阻斷盒，和塊盒用「溢出」比其他'可見'（除非該值已傳播到視口）爲其內容建立新塊格式上下文。

在塊格式化上下文中，框從一個包含塊的頂部開始，一個接一個垂直佈局。兩個兄弟箱之間的垂直距離由「邊距」屬性決定。塊格式化上下文中相鄰塊級別框之間的垂直邊距摺疊。

來源

2015-01-03 00:30:09

哇很好。你能解釋爲什麼'overflow：auto'修復它嗎？ – Timmerz

@Timmerz查看更新。一個新的塊格式化上下文被建立。 –

謝謝！我一直在使用CSS多年，仍然不知道一半。 – Timmerz

位置相對絕對子女保證金錯誤？

回答

相關問題