day11定位

1.相对定位：

            position:relative;

            特点：

                1、当添加了相对定位后，没有设置偏移量时，效果相当于static；

                2、添加了偏移量之后，元素对相对自身所在的位置进行位移；

                3、相对定位不脱离文档流，原本的位置保留，会发生层级变化；

            作用：

                1、实现位置上的微调

                2、定义绝对定位元素的的包含块

2.绝对定位：

            position:absolute;

            特点：

                1、绝对定位元素会脱离文档流，原本的位置不保留，后面的元素会把位置补上去；

                2、绝对定位元素对margin的auto属性值失效；

                3、在没有添加偏移量的时候，绝对定位元素在当前位置不动，但是会脱离文档流，发生层及变化；

                4、块元素添加了绝对定位之后，宽高根据内容显示，但是依然可以定义宽高

                5、行内元素添加了绝对定位之后，就可以定义宽高等属性了；

                6、绝对定位元素，添加偏移量之后，默认相对可视窗口的第一屏进行定位；

                7、可以修该绝对定位元素的参照物：

                    -> 参照物必须是绝对定位元素的祖先级元素（优先是父元素）；

                    -> 参照物必须设置定位属性，并且属性值为relative（推荐使用），absolute，fixed；

                8、绝对定位元素会相对离他最近的，并且具有定位属性的祖先级元素定位；

3.固定定位：

            position:fixed;

            特点：

                1、固定定位元素会脱离文档流，原本的位置不保留，后面的元素会把位置补上去；

                2、固定定位元素对margin的auto属性值失效；

                3、在没有添加偏移量的时候，固定定位元素在当前位置不动，但是会脱离文档流，发生层及变化；

                4、块元素添加了固定定位之后，宽高根据内容显示，但是依然可以定义宽高

                5、行内元素添加了固定定位之后，就可以定义宽高等属性了；

                6、固定定位元素，添加偏移量之后，就相对可视窗口进行定位，且不跟随滚动条滚动；

                7、固定定位元素的参照物始终都是可视窗口，不能改；

            使用场景：

                固定在窗口上，不跟随滚动条滚动时；

4.粘性定位：（了解）

            position:sticky;

            是css3.0 新增的定位模式；

            使用场景：

                实现吸顶效果；

            特点：

                1、添加粘性定位属性后，元素跟static的效果一样；

                2、添加了偏移量之后，当元素在可视窗口范围内时，显示的是没有定位的效果；

                但当元素即将超出可视窗口的时候，就会根据偏移量的值，固定在这个位置上，相当于固定定位的效果；