为什么绝对定位相对于父元素而非浏览器窗口？

绝对定位问题困扰

遇到一个令人费解的问题，试图对 p 应用绝对定位，但它仍然相对于其父元素进行定位。据了解，父元素需要设置绝对或相对定位，才会出现这种行为，但我的父元素并没有进行任何此类设置。

经过调查，发现导致问题的原因不在于代码中，而在于 html 节点的结构。如果不想让这个块基于当前父元素进行定位，最有效的解决方案是将其移至合适父元素之下。

代码中出现的等效结构：

<p>
    <p>
        <p>定位异常块</p>
    </p>
</p>

登录后复制

建议的结构：

<p>
    <p>要定位的块</p>
    <p></p>
</p>

登录后复制

如果要定位的块是在组件内定义的，无法将其移至父元素，则只有两种可能：

1. 纯浮动框，本质上应该是一个独立组件，需要修改组件声明。
2. 浮动框应用的是 position: fixed 定位，而不是 absolute。

值得注意的是，这个疑惑已经困扰了许多开发者，如果你也遇到了类似的问题，不妨检查一下 html 结构并尝试以上建议的解决方案。

以上就是为什么绝对定位相对于父元素而非浏览器窗口？的详细内容，更多请关注抖狐科技其它相关文章！