CSS里面的定位联系与区别

CSS 里面的定位问题

CSS position分为 static（默认定位），relative（相对定位），absolute(绝对定位),z-index(叠加原理)

下面一一介绍：

1. static: 没有定位，文档出现在正常流中，即按照html里面出现的上下顺序，left,right,bottum,top,z-index,无效。
2. fix： 相对于浏览器进行定位。
3. relative： 相对于直接父级元素进行定位，（也可以认为是相对于自己原来的位置进行定位）。
4. absolute: 绝对定位，相对于父级非static元素进行定位。
5. z-index: 数值越大，越在前面。

代码演示

原始位置

添加fix定位之后
代码：

 #no1{
            width: 500px;
            height: 500px;
            background-color: aqua;
           position: fixed;
           left: 200px;
           top:200px
        }

添加一个小盒子no2，并且为小盒子添加relative之后，小盒子相对与大盒子no1定位
代码：

 #no2{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            position:relative;
            left: 50px;
            top: 50px;

        }

添加一个no3的盒子，使用absolut相对于父级非static元素进行定位，即no2
代码：

#no3{
            width: 100px;
            height: 100px;
            background-color: tomato;
            position: absolute;
            left: 100px;
            top: 50px;
           
        }

为no3添加一个z-index属性，使它在后面。
代码：
#no3{
width: 100px;
height: 100px;
background-color: tomato;
position: absolute;
left: 100px;
top: 50px;
z-index: -2;
}
relative和sbsoluted 的区别：
relative的变化之后保留原来的位置，而absolute不再保留原来的位置，下面的元素将会对改变之前的位置进行填充。
演示：

 #no2{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            

        }
        #content{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

为no2添加relative定位之后，可见content（粉色方块）没有向上移动，进行填充。

 #no2{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            position: relative;
            left:50px;
            top:50px;
        }

添加absolute之后，可见content（粉色方块）上移，填充了no2
原来的位置。

#no2{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            position: absolute;
            left:50px;
            top:50px;

        }