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固定定位
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;
}
