css4种定位方式（静态定位，相对定位，绝对定位，固定定位）详解

说到定位就要用到 position 属性我们有四种不同的属性值
1.static
静态定位:使用静态定位时，元素处于普通流中，和未添加的元素一样处在最底层。
2.relative
相对定位：是相对于该元素在普通流时的位置
元素仍保持其未定位前的形状，它原本所占的空间仍保留。
就拿这三个div做比喻（这里就不给css代码了）

 <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

给son2（蓝色div）添加相对定位

  position: relative;

可以看到三个div还是和以前一样排列，我们给蓝色div继续添加top和left属性

 position: relative;
            top:50px;
            left: 50px;

可以看到蓝色div以原位置左顶点进行偏移。
众所周知定位有4个设置偏移量的属性，分别是：[left,right,top,bottom]
那我们来给蓝div添加一下

 position: relative;
            top:50px;
            left: 50px;
            right: 100px;
            bottom: 100px;

可以看到right和bottom没有任何效果
可是当我们在开发者模式中经left和right关闭

**此时right和bottom是有效的，所以这几个属性top和bottom，left和right不要同时出现，你要么左上，右下，不要上下一起来，上和左是优先于下和右的。
**
3.absolute
**绝对定位：**让元素脱离普通流，它会相对于顶级元素 body 定位。
还是那三个div，给蓝色div添加绝对定位

  position: absolute;

蓝块脱离了普通流，但红块未改变，独占一行，蓝块在原位置浮了起来，绿块因为蓝块浮了起来，向上补充了蓝块的位置，并且被蓝块覆盖。所以呈现了只有红蓝方块的效果

这个时候我们给蓝块添加left和top

  position: absolute;
            top: 50px;
            left: 50px;

效果：
蓝块相对于body的左顶点进行偏移。
那么我们想要让蓝块相对于父元素定位要怎么办呢？
可以使用子绝父相的方法，我们给蓝块的父元素添加一个相对定位：

position: relative;

效果

此时的蓝块就相对于父元素进行偏移了

注意

若我们把父元素的相对定位去掉，给父元素套一个父元素，并设置相对定位：
我们看一下效果：

这也就是“有奶便是娘”
4.fixed
**固定定位：**固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。常用于网页右下角回到到顶部。

关于子绝父相定位

自绝父相不是去找最近的一个设置了相对定位的父级元素，如果父元素设置了绝对相位他也可以根据该父元素设置位置，（父元素设置绝对和相对都可以）

猜一猜

今天做了一道题做错了，分享给大家：
还是那三个div（红，蓝，绿），设置定位，绝·相·绝
大家猜一下最后会有什么效果？**

具体代码如下：

//css部分
<style>
        #father {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }

        .son3 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
        }
    </style>
    //html部分
    <div id="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

思路：红块设置了绝对定位所以它脱离了标准流；那么后面的蓝块和绿块就会上来补它的空位，然后蓝块设置了相对定位，但他原本空间还是保留，所以后面绿块在进行绝对定位时就不会跑到上面而是在第二行浮动。
那么问题来了？
此时页面是上红下绿，还是上蓝下绿，这个今天我学到了，相对定位的图层级别高于绝对定位的级别。
所以效果如下：

呈现了蓝上绿下状态。