CSS定位

/* 定位 */

一、相对定位

 /* 相对定位 

                相对自身定位

            */

            /* position:  relative; */

.div2{
            width: 60px;
            height: 60px;
            background-color: red;
            margin: 0 auto;
            border: 1px solid yellow;
            float: left;
            /* 相对定位 */
            position:  relative;
            
        }

 

 二、绝对定位

/* 绝对定位 

                相对浏览器窗口（页面）定位;

                如果父盒子有定位属性，那就相对这个父盒子定位；

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

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

            */

            /* position: absolute; */

 .div3{
            width: 120px;
            height: 120px;
            background-color: yellow;
            position: absolute;
            top: 60px;
            left: 0;
            z-index: 1;
            display: none;
        }

注意：

         子绝父相

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

            

 

三、固定定位

 

 /* 固定定位 

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

 position: fixed;

            */

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

四、粘性定位

          粘性定位

                 偏移量同相对定位

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

                        position: sticky;

 .box2{
            position: sticky;
            top: 100px;
            left: 0;
        }