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;
}
