我正在尝试将 ID 为“absPos”的 div 放置在相对于其父 div 的绝对位置。但它不起作用，div 位于页面的左上角。
我的代码示例如下
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px; padding-left: 20px;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
你能帮我解决这个问题吗？ 在我的实际情况中，我必须放置背景图像而不是红色背景颜色。
问候
最佳答案
具有绝对定位的元素从它们的 offsetParent 开始定位，最近的祖先是 also positioned .在您的代码中，所有祖先元素都不是“定位”元素，因此 div 从 body 元素偏移，即 offsetParent。
解决方案是将 position:relative 应用于父 div，这会强制它成为定位元素和子元素的 offsetParent。
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px; padding-left: 20px; position: relative;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
关于html - 绝对位置不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54896034/