为什么我的绝对定位元素默认位于页面的左上角？

层叠样式表 (CSS) 中的绝对定位

在 CSS 中，绝对定位允许您使用特定像素移动父容器内的元素或百分比值。然而，遇到绝对定位问题可能会令人沮丧。让我们深入研究一下绝对定位的常见问题及其相应的解决方案。

问题：

在尝试将元素放置在相对于其父元素的绝对位置时，元素的放置失败，默认位于页面左上角。

代码示例：

<div>
<p><strong>解决方案：</strong></p>
<p>定位失败的原因在于父容器不是定位元素。具有绝对定位的元素从其 offsetParent（也被定位的最近的祖先）定位。在提供的代码中，没有一个祖先被定位，导致子元素相对于 body 元素发生偏移，body 元素是它的偏移父元素。</p>
<p>解决方案涉及应用 CSS 属性position：相对于父 div 。这会强制父元素成为定位元素，使其成为其子元素的 offsetParent。</p>
<p><strong>更正的代码示例：</strong></p>
<pre class="brush:php;toolbar:false"><div><p>通过设置父元素“padding” -左：20px；”和position:relative，我们在父元素中建立一个定位参考点，确保子元素在其父元素中准确的绝对定位。</p></div>