css定位

文档流是对相对于盒子

文本流是对相对于文字

定位：固定定位

           相对定位

           绝对定位

           粘性定位

 相对定位： 

            相对自身定位

            通常配合绝对定位使用

   .box{
            position: relative;
        }

* 绝对定位

                1.相对浏览器窗口定位

                2.父级有定位属性时，相对父级盒子定位

                3.逐级往上找，相对碰到的第一个有定位属性的父盒子定位，

                  如果没有，就相对浏览器定位

            */

            /* 子绝父相

                为了让绝对定位有定位点，一般会给他的父盒子加相对定位

z-index

                设置堆叠顺序的

                1.默认是z-index：1

                2.数字越大越靠前显示

                3.数字越小比如负数越靠后显示            

            */

 .div2{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
        }

 固定定位

                相对浏览器窗口定位，不随页面滚动改变位置

 .box1{
            height: 10000px;
        }
        .box2{
            /* 固定定位
                相对浏览器窗口定位，不随页面滚动改变位置
            */
            position: fixed;
            right: 40px;
            bottom: 40px;
            width: 60px;
            height: 300px;
            background-color: pink;
        }

粘性定位

                偏移量同相对定位

                页面滚动时，滚动到顶部，直接吸顶

.box2{
            
            position: sticky;
            top: 100px;
            left: 0;
        }
        .box6{
            width: 10px;
            height: 100000px;
        }