Div元素位於它的兄弟姐妹之下，它自己的孩子位於它的上方

Question

我有一個在圖像後生成的div元素。這個div包含一個H1和P元素。有問題的div有一個負的頂邊距重疊圖像。

我的問題是，這個div顯示在圖像後面，它的子元素在它上面。這是跨越多個瀏覽器，似乎是有意的行爲，我無法圍繞爲什麼以及如何克服它。

我會真的寧願不使用絕對定位，因爲這是一個相當動態的佈局。

問題是在這裏重現：http://jsfiddle.net/mVE8L/

HTML：

<img src="(I'm not allowed to link images)"> 
<div class="problematic"> 
<h1>Sup guys</h1> 
</div> 

CSS：

h1 { 
font-size: 3rem; 
} 
.problematic { 
margin-top: -70px; 
background: #ff0000; 
} 

Answer 1

這是一個z-index的問題。只需添加

position: relative;到.problematic您也可以添加z-index:1;但您不需要。

Answer 2

Demo

可以使用z-index

.problematic { 
    margin-top: -70px; 
    background: #ff0000; 
    position:relative; 
    z-index:-1; 
}