day06

1定位

• 相对定位relation

• 绝对定位absolute

div{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            left:200px;
            top:200px;
            /*相对定位一般不使用right,bottom*/
            /*right:0px;*/
            /*bottom:10px;*/
        }

• 相对定位就是元素在页面上的正常位置

2绝对定位

• 绝对定位的元素移动的位置，是离他最近的给了定位的父元素left,right,top,bottom

.parent{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
            .child{
            left,right,top,bottom*/
            width: 50px;
            height: 50px;
            background: green;
            position: absolute;
            right: 0;
            bottom: 0;
}

3固定定位

• fixed固定定位

 div{
            width: 20px;
            height: 50px;
            background: red;
            position: fixed;
            right: 10px;
            bottom: 130px;
        }
- 例如 “↑顶部”  “二维码”

4堆叠顺序

• z-index设置给了absolute定位元素的堆叠顺序 谁大谁就在上面

.parent{
            width: 300px;
            height: 300px;
            background: red;
            position: relative;
        }
        .one{
            width: 100px;
            height: 100px;
            background:green;
            position:absolute;
            z-index: 100;
        }
        .two{
            width: 200px;
            height: 50px;
            background: blue;
            position: absolute;
            z-index: 101;
        }