css定位总结

定位position: static（默认）、fixed（固定定位）、absolute（绝对定位）、relative（相对定位）、sticky（粘性定位）

1. fixed 

    特点：不占空间、不随滚动条移动

    相对于浏览器窗口进行定位，不占空间；

    如果不设置定位坐标，则就在原来的位置；

    如果结合定位坐标，就是相对于目标位置的距离；

    层级要比普通标签高；

    设置固定定位后，就一定是块元素

2. relative

    特点：占空间、不脱离文档流的布局

    如果不设置定位坐标，则就在原来的位置；

    如果结合定位坐标，则是相对自身的距离；

    层级要比普通标签高

3. absolute

    特点： 不占空间、脱离文档流的布局

    层级比普通标签高；

    （谁设定位就跟着谁）绝对定位如果有定位坐标，则以祖先元素（需设置position为relative/absolute/fixed）作为坐标的参考；

    如果祖先没有设置定位（relative/absolute/fixed），则一直往上找，直到找到body，就以body来进行定位，即相对于整个窗口来定位；

    定位的起始位置为最近的父元素（position为relative/absolute，不能为static）

    总之：当某个absolute定位元素的父元素具有position: relative/absolute/fixed时，定位元素都会依据父元素定位，而父元素没有position属性或者设置了默认属性（static）,那么会根据body来定位

4. sticky

    是relative和fixed的混合，在屏幕范围内时，没有影响（relative），当要移除屏幕范围时，会变成fixed

    特点：

    该元素并不脱离文档流，仍然保留元素原本在文档流中的位置，即在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效）；

    当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（父元素的overflow属性需是默认值visible属性）；

    sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效；

   demo:

    

5. 补充知识点

    z-index属性 仅能在定位元素上生效

    技巧： css实现字体文本span总在其它元素上面？

    实现方案：1）将父元素设置为position:relative

                       2）再将文本span设置为position:absolute

                       3）最后将span的z-index属性设置为一个较大的值 如z-index:999