Html Div元素位于其同级元素下方，其自身的子元素位于其上方

我有一个div元素，它是在图像之后生成的。这个div包含一个H1和P元素。所讨论的div有一个负的上边距以重叠图像

我的问题是这个div显示在图像的后面，它的子元素显示在图像的上面。这是跨多个浏览器的，似乎是有意为之的行为，我只是不知道为什么以及如何克服它

我真的不想使用绝对定位，因为这是一个相当动态的布局

问题重现于此：

HTML:

---

这是一个z指数问题。加上

位置：相对

到

。有问题的

您还可以添加

z-index:1但您不需要这样做。

您可以使用
z-index

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

太好了，谢谢。有没有什么好的解释或规范来说明哪些规则在这里起作用？不客气。我建议你读一读：祝你好运
h1 {
font-size: 3rem;
}
.problematic {
margin-top: -70px;
background: #ff0000;
}

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