4种定位分别是粘性定位,相对定位,绝对定位,固定定位。有很多小伙伴分不太清楚绝对定位和相对定位。在下边我分别举例子说明一下。
1.relative 相对定位,这个相对是相当于自己的原来位置来说的。可以通过top,bottom,left,right移动位置也可以通过z-index设置层级。脱离标准流,并且移动之后,移动之前的位置还占有。
.o {
position: relative;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: aqua;
}
2.absolute 绝对定位。这个定位比较特殊,他的参照物是先寻找自己父级(广义,可以是父级的父级)除了static之外的有定位的,如果父级无其他定位,以浏览器为参照物。可以通过top,bottom,left,right移动位置也可以通过z-index设置层级。脱离标准流,并且移动之后,移动之前的位置不存在
注意:使用绝对定位父级有定位的情况,以父级为参照物移动 ,父级无定位的情况,以浏览器为参照物移动。
box1 {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: skyblue;
}
fixed 固定定位可以通过top,bottom,left,right移动位置也可以通过z-index设置层级。脱离标准流。相对于浏览器设置,一般用于导航栏,浏览器拖动,fixed定位不动