Div元素跳到页面顶部，尽管它写在另一个section和另一个Div中

Question

我最近遇到了一个让我很困惑的问题。这可能只是由于学习编码后的隧道视觉基本上是通过尝试和错误，但我有一个div(应该是一些文本的单一颜色形状背景)，甚至认为它是定位在正确的html部分和(超级)div，它只是没有显示在我期望它的地方，而是跳到页面的顶部。

你有什么建议吗?

.third-section .problematic-div {
position: absolute;
left: -100px;
top: 0%;
background: lightgray;
width: 500px;
height: 200px;
margin-left: 340px;
z-index: -1;
}

<section class="first-section">
...
</section>
... ... ...
<section class="third-section">
<div>
<div class="problematic-div"></div>
</div>
</section>

Answer 1

您可能在父母之一中缺少position: relative;。
由于这个属性绝对子组件相对定位为所以如果你把position: relative;加到上。第三节类，。problem -div将自己定位在这个部分的顶部。