css中的定位

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定位不动