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索引问题。只需添加

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

Answer 2

Demo

您可以使用z-index

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