登录
首页 >  文章 >  前端

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

来源:php

时间:2024-11-12 13:43:05 353浏览 收藏

哈喽!大家好,很高兴又见面了,我是golang学习网的一名作者,今天由我给大家带来一篇《为什么绝对定位相对于父元素而非浏览器窗口?》,本文主要会讲到等等知识点,希望大家一起学习进步,也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧!

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

绝对定位问题困扰

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

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

代码中出现的等效结构:

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

建议的结构:

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

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

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

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

文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《为什么绝对定位相对于父元素而非浏览器窗口?》文章吧,也可关注golang学习网公众号了解相关技术文章。

声明:本文转载于:php 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>