position：absolute与relative的区别

最新推荐文章于 2024-07-23 22:34:05 发布

在路上Ven

最新推荐文章于 2024-07-23 22:34:05 发布

阅读量1.2w

点赞数 5

分类专栏： Web

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。

Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

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;
}

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

web前端上市企业技术免费视频学习资源群：575057881

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的默认定位属性），看到结果如下：