CSS学习之相对定位和绝对定位

1>位置属性position

    position的值包括 relative（相对定位）、 absolute（绝对定位）、fixed（固定位置）、 static 等

        不设置时默认就是static。

        

        设置定位之后，top、left、right、bottom属性值可以使用。

2>相对位置

     相对于自身进行定位
1>不设置偏移量的时候 对元素没有任何影响，设置了偏移量，则基于自身初始的位置进行偏移

2>可以提升层级关系 

    如下，初始三个盒子，设置第一个盒子相对定位，设置偏移，效果如下，

    

    都设置相对定位，偏移

    

    如上，因代码执行顺序至上而下，所以最后设置相对定位的，层级最高，在最上面显示了，那么，如果要

    使前面的显示最上面，或者干脆改变层级关系，让他根据需求自定义显示，该怎么设置呢？

    这里引入一个z-index属性，默认值为0，值设置越大，则层级关系越大，

    如下，把蓝色盒子的z-index设置为2，则置顶显示了，若要把绿色提上来，则需设置绿色盒子的z-index值大于2。

    

3>绝对位置

    初始两个盒子，父子关系的，如下

    

    父盒子未设置位置属性，子盒子设置绝对位置时

    

     父盒子未设置位置属性相对位置，子盒子设置绝对位置时

    

    根据上面，可总结如下

     1>在没有父级元素定位时，以浏览器的左上角为基准

2>有父级的情况下，父级设置相对定位，子级设置绝对定位 是以父盒子进行定位的

    实际项目开发当中，这种“父相子绝”的样式手法经常用到。-----父相对，子绝对

4>固定位置

    顾名思义，固定在浏览器某个位置，

    初始两个div盒子，

    

    这，就是固定位置，很容易想到它的使用场景，比如平常浏览网站，不管如何滚动网站，网页右侧的

    那些“联系客服”的图标，一直在那。

总结：