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

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

绝对定位问题困扰

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

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

代码中出现的等效结构:

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

建议的结构:

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

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

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

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

以上就是为什么绝对定位相对于父元素而非浏览器窗口?的详细内容,更多请关注www.sxiaw.com其它相关文章!