CSS負邊距重疊不適用於子元素

Question

我正在努力處理一些基本的CSS佈局流程。如果我有兩個div，一個接一個，第二個div有負的上邊距，我認爲它會覆蓋前面的div。

但是，我發現雖然第一個div確實是重疊的，但它的內容卻不是。

<div style="background:green;height:20px;"> 
    <span style="background:red;display:inline-block;padding:2px;">HELLO</span> 
    <span style="background:red;display:inline-block;padding:2px;">HELLO</span> 
    <span style="background:red;display:inline-block;padding:2px;">HELLO</span> 
</div> 
<div style="background:yellow;height:20px;margin-top:-10px;"> 
</div> 

https://jsfiddle.net/xwghd5r2/

---

這似乎違背了基本的堆疊順序原則：

從https://css-tricks.com/almanac/properties/z/z-index/：

如果沒有任何z-index值，則元素按照它們 出現在DOM中的順序堆疊（在同一層次級別上最低的一個出現在頂部）。具有非靜態定位的元素始終會在具有默認靜態定位的元素頂部出現 。

另請注意，嵌套起着重要作用。如果一個元素B坐在元素A的頂部 ，A元素的子元素，並且不能超過 元件高B.

---

注：我不會改變尋找修復position屬性 - 我只是想了解爲什麼這個當前流程正在使用默認的靜態定位。

Answer 1

繪畫訂單在Appendix E中定義。

當瀏覽器描繪這些內容，將第一塗料塊的背景

對於所有其在流動的，非定位，塊級後代如果元素是塊，列表項或其他塊等效項：

1. 元素的背景顏色。直列塊

和背景將在從所述塊的那些前面待塗漆：

否則：第一爲元素，則對於樹中的所有流入，非定位，塊級別的後代：

1. 否則，對於每個線框

   1. 對於是元素的孩子，在這條線箱每箱，按照樹形結構順序：元素的

      1. 背景顏色的元素。

注意，第二塊的內容將仍處於直列塊的前面待塗漆：

div { 
 
    height: 20px; 
 
    background: green; 
 
} 
 
div + div { 
 
    background: yellow; 
 
    margin-top: -10px; 
 
    color: #0ff; 
 
} 
 
span { 
 
    background: red; 
 
    display: inline-block; 
 
    padding: 2px; 
 
}

<div> 
 
    <span>HELLO</span> 
 
    <span>HELLO</span> 
 
    <span>HELLO</span> 
 
</div> 
 
<div>█ █ █ █ █ █ █ █ █</div>

Answer 2

使用position: relative，研究職位和z-index。

https://jsfiddle.net/xwghd5r2/1/

Answer 3

你想要黃色的div重疊第一個div的內容？在黃色div上添加：position:relative。

Answer 4

希望這會有所幫助。 下面是代碼：https://jsfiddle.net/xwghd5r2/3/

nav, #down { 
 
    position: relative; 
 
}

<nav style="background:green;height:20px;"> 
 
    <li style="background:red;display:inline-block;padding:2px;">HELLO</li> 
 
    <li style="background:red;display:inline-block;padding:2px;">HELLO</li> 
 
    <li style="background:red;display:inline-block;padding:2px;">HELLO</li> 
 
</nav> 
 
<div id="down" style="background:yellow;width:100%;height:20px;margin-top:-10px;"> 
 
</div>

Answer 5

據我所知，一個父元素孩子總是更高的指數。基於對你的榜樣

讓我們鐵餅：

<div style="background:green;height:20px;"> <-- index: 1 
    <span style="background:red;display:inline-block;padding:2px;">HELLO</span> <-- index: 2 
    <span style="background:red;display:inline-block;padding:2px;">HELLO</span> <-- index: 2 
    <span style="background:red;display:inline-block;padding:2px;">HELLO</span> <-- index: 2 
</div> 
<div style="background:yellow;height:20px;margin-top:-10px;"> <-- index: 1 
</div> 

因此，根據你的榜樣，你的span元素將得到顯示在前臺，相比，無論你div元素。另一方面，第二個div元素將與第一個元素重疊。這是因爲它們具有相同的索引值。

換句話說，您的瀏覽器將根據元素索引值（您自己的元素當然是首選）和（如果索引相同）按您的元素放置在您的內部的順序標記。

注：元素的任何樣式變化可以結果在不同的behaivour，如果它不是你的瀏覽器默認的。