html - 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; 但你不需要。