嵌套在section与父div内的div元素异常跳转至页面顶部问题求助

• 优先排查父元素定位属性：position: absolute 规则的元素，会相对最近一个设置了非static定位（可选值为relative/absolute/fixed/sticky）的父元素偏移。如果你的.third-section以及它内部包裹.problematic-div的父div都没有显式设置position属性，该元素就会默认以整个页面根节点为参照偏移，top: 0%自然会跑到页面顶部。解决方法是给你需要作为定位参照的父元素添加position: relative属性即可，比如你要让它相对third-section定位，就给.third-section加该属性。
• 清理冲突的定位偏移值：你同时设置了left: -100px和margin-left: 340px，两个属性都会影响元素水平偏移，最终生效的水平偏移量是两者相加的240px，如果不是刻意设计的逻辑可以合并成单一的left属性值，避免后续维护样式时出现混淆。
• 排查层级遮挡问题：你设置了z-index: -1，如果父级元素设置了overflow: hidden或者页面内有其他层级更高的元素覆盖，可能会导致元素看不到，容易误判为定位错误，可以先把z-index调整为正数确认元素实际位置后再调整层级。
• 用浏览器开发者工具快速定位：右键点击目标div选择「检查」，在元素面板的样式栏可以看到浏览器直接高亮的定位参照元素、生效的样式值、是否有其他样式覆盖当前规则，不用盲猜直接就能找到问题。

修改参考代码：

/* 给定位参照父元素添加relative属性 */
.third-section {
  position: relative;
}
.third-section .problematic-div {
  position: absolute;
  left: 240px; /* 合并原left和margin-left的计算结果 */
  top: 0%;
  background: lightgray;
  width: 500px;
  height: 200px;
  z-index: -1;
}

内容的提问来源于stack exchange，提问作者gspnst