CSS定位以及z-index屬性(層疊性)的詳解
阿新 • • 發佈:2019-01-06
定位
定位方向:top left right bottom就這四個位置
一、靜態定位
position:static;
靜態定位就是文件流,沒有別的意思,不需要寫
二、絕對定位 (脫標)
position:absolute;
(注意)參考點問題:
1)如果用top描述,定位的參考點是整個頁面的最左上角,而不是瀏覽器的左上角
2) 如果用bottom描述,參考點是“ 瀏覽器首屏視窗尺寸 ”,注意:是首屏, 對應當前頁面的左下角(不滾動到下面去)
- 若無相對定位作參考,則以瀏覽器頁面為參考
- 當盒子發生巢狀關係時,如果父集元素沒有設定定位,子盒子設定了絕對定位並賦值,子盒子的位置從瀏覽器左上角出發。
- (子絕父絕)當盒子發生巢狀關係時,如果父集元素設定了絕對定位,子盒子設定了絕對定位並賦值,子盒子的位置從父集元素左上角出發。
三、相對定位
position:relative;
就是微調元素的位置,讓元素想對自己原來的位置,進行位置調整
1.不脫標,老家留坑,形影分離
本質上元素位置還在原來的地方,只不過飄到別的地方去了(相當於影子)
2.使用相對定位,位置從自身出發
3.還佔據原來的位置。沒有脫標,可用於做微調
四、固定定位
position: fixed;
是相對於瀏覽器視窗定位。頁面如何滾動,這個盒子顯示的位置保持不變。(IE6不相容)
1.脫標
2.固定定位後,以瀏覽器為參考點
層疊性:z-index屬性
(number型別)正整數,預設的z-index值是0
取值範圍如下:
1)從夫現象
父節點的z-index屬性值,將會直接影響子節點的層疊性
即: 父節點的z-index值很小,無論子節點的z-index值多大,其層級仍然小。
- 例如:
A,B節點都設定position為relative,且A的z-index為1,B的z-index為0,A的層級比B大
因此:A的子節點必定會覆蓋在B的子節點上,無論B的子節點的z-index值多大。
<div id="A" style ="position:relative;z-index:1;">
<div id="a-1" >A-1</div>
</div>
<div id="B" style="position:relative;z-index:0;">
<div id="b-1">B-1</div>
</div>
2) z-index值表示誰壓著誰。數值大的壓蓋住數值小的
3)只有定位了的元素,才能有z-index值(相對定位,絕對定位,固定定位)浮動的盒子不能用。
4)如果都沒有z-index值,或值都相同,那麼誰在HTML後面,誰就在上面,壓住別人。
<div id="a">A</div>
<div id="b">B</div>
<!--A,B節點都設定了定位,且沒有設定z-index值,那麼B節點會將A節點遮住-->
注意:
定位了的元素,永遠能夠壓住沒有定位的元素
層疊順序
層級由低到高:
1.標準流盒子 < 浮動盒子 < 定位盒子
2.background/border < 負z-index < block塊狀水平盒子 < float浮動盒子 < inline/inline-block水平盒子 < z-index:0 < 正index