CSS基础之定位模式分类

1.定位模式分类

        1）静态定位static，默认值，通常不做研究

        2）相对定位relative

        3）绝对定位absolute

        4）固定定位fixed

        5）粘性定位sticky

2.利用定位调整元素位置思路：

        1）先确定用哪种定位模式

        2）用偏移值

3.定位特点

        1）绝对定位：absolute

                特点：（1）从文档流角度：会脱离文档流，不占据位置

                          （2）层叠顺序：默认按照html代码书写顺序，后者覆盖前者；

                                   可以借助z-index做调整，值越大层级越高，支持负数，不带单位；

                          （3）参照物：有定位的父级元素，如果这些父级元素都没有定位，就默认按照浏览器窗口的第一屏为参照物。

                注意：父级元素定位模式可以是除静态（static）之外的任何一种

                推荐：子绝父相

        2）相对定位：relative

                特点：（1）从文档流角度：不会脱离文档流，占据位置

                           （2）层叠角度：同上

                           （3）参照物：自己原来所在位置

        3）固定定位：fixed

                特点：（1）从文档流角度：会脱离文档流，不占据位置

                           （2）层叠角度：同上

                           （3）参照物：永远都是浏览器窗口

               使用场景：广告、侧标导航

        4）粘性定位：sticky

                特点：（1）不滚动时=================相对定位

                           （2）滚动时================== 固定定位