本文主要是介绍通过案例(面试题)深度理解absolute与relative的关系(有无TRBL,有无父级），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
通过案例深度理解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则会以浏览器的左上角为原始点，不会因为分辨率的变化而变化位置，这是一个容易出错的点
相信大家看完了这篇文章会解答心中一定的疑惑，如果对您有帮助就麻烦点赞留言支持下吧
如有不足或是错误之处，还望大佬不吝赐教指正，让我们一同进步吧！
这篇关于通过案例(面试题)深度理解absolute与relative的关系(有无TRBL,有无父级）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
