1.定位
系任。position-設(shè)置定位方式
呼巴。top,right,bottom,left,z-index-設(shè)置位置
2.top/right/bottom/left
元素邊緣距離參照物邊緣的距離
3.z-index
設(shè)置元素在z軸上的排序
4.z-index 棧
5.position
纹安。position:static | relative | absolute | fixed
6.position:relative
。仍在文檔流中
。參照物為元素本身
最常用:改變?cè)撛貙蛹?jí)
使用場(chǎng)景:絕對(duì)定位元素的參照物
7.position:absolute
。默認(rèn)寬度為內(nèi)容寬度
盾戴。脫離文檔流
。參照物為第一個(gè)定位祖先/根元素(根元素即html元素
8.輪播頭圖
position:relative;
position:absolute;
image.png
9.position:fixed
兵多。默認(rèn)寬度為內(nèi)容寬度
尖啡。脫離文檔流
。參照物為視窗
布局:固定頂欄position:fixed; top:0
布局:遮罩position:fixed; z-index:999;top:0; width:100%,height:100%//蓋住整個(gè)頁面
布局:三行自適應(yīng)布局
.head{position:absolute; top:0; left:0; width:100%; height:100%;}
.body{position:absolute; top:100px; left:0; bottom:100px; right:0;}
.foot{position:absolute; bottom:0; left:0; width:100%; height:100px;}```