Div 元素跳转到页面顶部，尽管写在另一个部分和另一个 div

Question

我最近运行遇到一个让我困惑的问题。这可能只是因为在基本上通过反复试验学习编码后有隧道视野，但我有一个 div （对于某些文本应该是单一颜色形状背景）甚至认为它位于正确的位置html 部分和 (super)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; 中的一个父项。
感谢这个属性 absoulte 子组件将是相对定位，因此如果将position: relative;添加到.third-section class，.problematic-div 会将自己定位在该部分的顶部。

Div 元素跳转到页面顶部，尽管写在另一个部分和另一个 div

Div element jumping to the top of page despite written inside another section and another div

html

css

position

css-position