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

【问题标题】：Div element jumping to the top of page despite written inside another section and another div尽管写在另一个部分和另一个 div 中，但 div 元素跳转到页面顶部
【发布时间】：2021-12-13 23:09:36
【问题描述】：

我最近遇到了一个让我很困惑的问题。这可能只是因为在通过反复试验学习编码后具有隧道视觉，但我有一个 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>

【问题讨论】：

标签： html css position css-position

【解决方案1】：

您可能在其中一个父级中缺少position: relative;。
由于此属性，absoulte 子组件将相对于它相对定位，因此如果您将position: relative; 添加到.third-section 类，.problematic-div 将自己定位在该部分的顶部。

【讨论】：