通过案例(面试题)深度理解absolute与relative的关系(有无TRBL,有无父级）

最新推荐文章于 2022-05-10 21:45:26 发布

YodgeGGG

最新推荐文章于 2022-05-10 21:45:26 发布

阅读量337

点赞数 1

分类专栏： CSS 前端文章标签： css html css3

本文链接：https://blog.csdn.net/RoonaTh/article/details/110859074

版权

前端同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

通过案例深度理解absolute与relative的关系(有无TRBL,有无父级）

我们先通过一段代码来引入这个问题

<style>
      span {
        background-color: #FFFFFF;
      }
      p {
        background-color: blue;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>

<body>
    <span>我是第一行的span标签</span>
    <p>我是第二行的p标签</p>
    <span>我是第三行的span标签</span>
	</body>

大家可以看到p标签的样式中加入了position:absolute，这道题通常会问的是p标签分别在有无absolute时在页面中的表现是怎样的

先给大家看下有position:absolute这一属性时的显示
在这里插入图片描述
对于刚刚熟悉absolute和relative的大家可能会有一个疑问，哎这个p标签的这一行不是应该紧贴浏览器左上角的窗口吗，怎么会跑到这里，而且这个第三行的span标签怎么会跑到这里

下面解答：首先span标签是行内元素，而p标签与div同理都是块状元素，默认会占据一行，这里之所以第三行的span标签会脱离原有位置跑到第一行是因为当某一元素设置了position:absolute后会脱离文档流，简单点说就是不再进行占位了，类似于元素设置了position:fixed后会高度坍塌同样不占位的原理是一样的

举个例子，当我们把位置改为relative时，会出现如下效果
在这里插入图片描述
大家可以看到，这里就变成了正常的显示，所以position:relative 是不会脱离文档流的，它仍然占据自己原有的位置，通过TRBL（即top,right,bottom,left）来进行浮动，但仍占据自己原有的位置，只是进行了视觉上的位置移动

下面继续切回正题解答，当position:absolute没有设置TRBL时，（引入MDN的原话）
在这里插入图片描述
意思就是绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。
而根元素所在的包含块就叫初始包含块（ICB），所以也就是说当绝对定位的元素没有非 static定位属性的父元素时，相对于ICB定位。

大家仔细阅读完这句话就可以明白，此时的绝对定位元素是相对根元素（即HTML）进行定位的，那么当我们给他设置了TRBL后会显示什么样呢

在这里插入图片描述
这里我设置了top:0，大家可以看到该绝对定位元素紧贴窗口进行定位，所以到这里大家应该不仅对这道题有了原理上的深度理解

下面我对relative和absolute这两个位置进行一个总结

position:absolute参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

position:relative参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

对于很多朋友会使用绝对定位来定义一个元素在网页上的居中显示，这里我是不推荐的，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会因为分辨率的变化而变化位置，这是一个容易出错的点

相信大家看完了这篇文章会解答心中一定的疑惑，如果对您有帮助就麻烦点赞留言支持下吧

如有不足或是错误之处，还望大佬不吝赐教指正，让我们一同进步吧！