CSS | absolute绝对定位的默认位置

MGsniper

已于 2022-02-23 19:17:50 修改

阅读量5.9k

点赞数 11

分类专栏： CSS2 文章标签： absolute原点绝对定位原点绝对定位参考点 absolute参考点

于 2019-01-18 16:29:46 首次发布

本文链接：https://blog.csdn.net/qq_36145914/article/details/86542379

版权

16 篇文章 0 订阅

订阅专栏

若文章有任何纰漏或未涉及你想了解的内容，欢迎在评论提出，我会尽最快速度回复。

2019.8.25在制作基于layui的复合菜单时，用到了绝对定位默认位置的特性，故翻出本文进行了修订。

关于绝对定位元素的默认位置，我们根据经验或是某些“通行“说法，认为绝对定位元素的默认位置是其第一个非静态定位祖先节点的左上角。

这种认知对参考元素的理解是正确的——即绝对定位元素的参考元素是第一个非static定位祖先节点。若祖先元素不存在，则相对于初始包含块，一般为html根节点。
但“左上角”的认识是错误的。absolute定位下，left/top默认值是auto，元素并不总出现在左上角——“left 0 top 0”的位置。

造成这种错误认知的原因在于，开发者常常会把绝对定位元素放在非静态定位父容器内的第一个，又或是设置完绝对定位，就一定会设置偏移量，而没有考虑过仅设置absolute定位而不设置偏移量的场景。
那么left/top：auto的计算机制究竟是怎样的呢？
在这里插入图片描述

为了验证文档中的定义，下面进行两组四个实验：

    <div class="container">
        <div class="brother"></div>
        <div class="test"></div>
    </div>

结果如下，静态定位的两个块级元素根据BFC，各占一行。
在这里插入图片描述

当测试元素改为绝对定位以后，它保持了静态定位时的位置
在这里插入图片描述

当兄弟节点为绝对定位，脱离文档流后，静态定位的测试元素顶到了容器的左上角。
在这里插入图片描述

当兄弟节点为绝对定位，测试元素也变为绝对定位后，测试元素仍然保持了静态定位时的位置（但元素的层叠性发生了变化，在同是绝对定位的情况下，节点靠后的测试元素层叠性更高，视觉上覆盖了兄弟节点，有关层叠性，请参考堆叠上下文与z-index
在这里插入图片描述

由上述实验可证得，absolute定位元素的默认位置就是该元素假定在标准文档流中的位置。具体地，浏览器先预估该元素在标准文档流中的位置，然后再进行绝对定位，将它移出标准文档流，它并不会自动移到"left 0 top 0"的位置，假如有兄弟元素占位，它的原点也不会出现在父元素内容块的左上角。

我用absolute默认位置特性，实现了基于layui的复合菜单，实例即将补充…

关注

专栏目录