探究position定位中absolute和relative的异同

NickZhou 发布于2019-08-29 13:57 / 2824人阅读

摘要：总结一下定位相对于谁进行定位有点复杂就是找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位即定位的，那么就相对于它进行定位。当父元素链上所有父元素都是默认定位，那么定位就是相对于元素的，效果和定位差不多。

相信学过CSS的同学都曾经对于position的各种属性很困惑，尤其是absolute和relative定位，简直就是傻傻分不清，笔者写这篇文章就是希望通过代码实验的方式来揭露absolute和relative定位的本质区别。

一、默认定位

HTML结构如下：

和

是为了与窗口的顶部隔开距离便于观察，neighboor和child2的div是为了对比位置，我们真正需要定位的焦点放在了child1的div上。

Position Attribute
Relative & Absolute

CSS如下：

.parent{
    background-color: yellow;
    height: 200px;
    width: 200px;
    display: inline-block;
}

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
}

.child2{
    background-color: royalblue;
    height: 50px;
    width: 50px;
}

.neighboor{
    background-color: pink;
    height: 200px;
    width: 200px;
    display: inline-block;
}

我们来看一下默认定位的效果（特意留出地址栏方便观察位置对比）

二、relative定位

首先我们来看一下官方的解释：生成相对定位的元素，相对于其正常位置进行定位。我们来尝试一下在child1中加入relative定位，并且辅以top和left位移值：

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
    position: relative;
    top: 20px;
    left: 20px;
}

效果如下：

我们看到绿色方块代表的child1和原来的位置相比top和left偏移了，但是其他的div都安分守己地待在原处，就好像child1的位移并没有对它们造成任何影响。

所以我们总结relative定位：
1.相对于元素原来的位置进行相应的位移；
2.其他元素的位置并不受影响，也就是说被定位的元素原来的位置还存在占位，并没有释放。

三、absolute定位

首先我们还是来看一下官方的解释：生成绝对定位的元素，相对于默认定位以外的第一个父元素进行定位。我们尝试一下在child1中加入absolute定位：

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 20px;
    left: 20px;
}

我们看到效果如下：

我们观察到，绿色块代表的child1是相对于浏览器视口进行了位移，而且它原来所占的位置被释放掉，被紫色块代表的child2给占领了。这里我们容易得到absolute和relative最重要的一个区别：relative定位不释放原来所占的位置，absolute定位释放原来所占的位置。还有个悬而未决的地方，就是absolute定位到底相对于谁进行位移的，在我们刚刚的试验中，“貌似”是相对于浏览器视口进行偏移的，但是事实真的如此吗？我们来研究一下官方的那句定义“相对于默认定位以外的第一个父元素进行定位”。在我们刚刚的试验中，parent、container、body都是chidl1的父元素，但是parent和container都是默认定位，所以“默认定位以外的第一个父元素”就是body元素了。那现在我们给parent进行relative定位（这里不需要设置LTRB偏移值，只是消除parent的默认定位属性），看到结果如下：

果然如和我们所料，这个时候“默认定位以外的第一个父元素”就是parent了，所以这次child1是相对于黄色块代表的div进行偏移的，而由于它释放了原来所占的位置，紫色块代表的div2就占领了它的位置。

总结一下absolute定位：

相对于谁进行定位有点复杂：就是找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位（即static定位）的，那么就相对于它进行定位。

定位元素会释放原来所占的位置，其他元素会补充进来，好似float属性让其漂浮起来一样。

当父元素链上所有父元素都是默认定位，那么absolute定位就是相对于body元素的，效果和fix定位差不多。

相信通过以上的代码实现探究，大家已经对absolute和relative定位有了更深刻的认识，其实只要把握两点：1.相对于谁定位 2.是否释放原来的位置（比较官方的说法是“文档流位置”）就足以应付大多数情况了，以后应该不会再对它们傻傻分不清了吧：）

专线服务私有云 position:absolute position定位 float和position 关于webrtc直播的探究

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112816.html

探究：绝对定位没有设置 top, right, bottom, left 的世界是怎样的？

摘要：一个元素如果设置了但没有设置此元素的位置在哪在涉及到绝对定位元素的位置问题时一个重要的概念是想要了解元素的位置还得找到此元素的才行如下是我进行的一系列测试以及对测试结果的试探性解释文中的英文术语都不翻译方便直接查或者其他技术文档请持有怀疑精一个元素如果设置了position: absolute;, 但没有设置top, right, bottom, left, 此元素的位置在哪? 在涉...

kbyyd24 2019-08-28 18:14 评论0 收藏0
前端计划——面试题总结-CSS篇

摘要：定位使元素的位置与文档流无关，因此不占据空间。可以知道属性有以下几个特点该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。前端面试之CSS篇 1、三种基本引入方式外部样式表内部样式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

马永翠 2019-08-29 13:09 评论0 收藏0
WEB前端面试题汇总（CSS）

摘要：默认值，没有定位，元素出现在正常的文档流中。生成粘性定位的元素，容器的位置根据正常文档流计算得出。和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。 position的值， relative和absolute分别是相对于谁进行定位的？、relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。、absolute:生成绝对定位，相对于最近一...

qpwoeiru96 2019-08-29 12:39 评论0 收藏0
Web前端经典面试试题（二）

摘要：上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一栈和队列的区别栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删...

rickchen 2019-08-29 17:04 评论0 收藏0
Web前端经典面试试题（二）

摘要：上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一栈和队列的区别栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删...

venmos 2019-08-02 11:47 评论0 收藏0