static:
默认定位,正常文档流,从上到下,从左到右,正常渲染
relative:
相对定位,相对本身自己进行定位,虽然脱离文档流,但是依然占据原先的地方。相对定位,不会影响其他元素的布局。left,right,top,bottom。
child1{
background: skyblue;
position: relative;
right: 100px;
}
absolute:
绝对地位,绝对于父元素或者是祖先元素进行定位。最接近它的设定了定位的祖先元素或者是父元素。absolute脱离文档流,但是不占据正常文档流的任何位置。
.child2{
background: skyblue;
position: absolute;
top: 0;
left: 0;
}
fixed:
固定定位,绝对于浏览器进行定位。对导航栏进行定位:
.nav{
position:fixed;
width: 100px;
height: 300px;
}
sticky:
粘性定位(固定定位的升级版本,但由于部分浏览器的新特性,所以没有被大量使用)
z-index:
1、相同层级的div元素,如果使用了定位,那么写在后面的元素,它的层越大,默认z-index=0
2、如果父元素都没有设置定位的情况下,那么z-index比较大,谁的层在前面,如果z-index一致,那么谁写在后面,谁的层比较大
3、当z-index父级都有设置的时候,看父级谁的层大,父级谁大,谁的层就比较高。
#div2{
width: 600px;
height: 400px;
background: seashell;
position: relative;
z-index: 1;
}
注意:
定位:尽量在小范围内使用,不要在整体布局上使用