CSS定位以及z index屬性(層疊性)的詳解

2021-08-16 09:48:35 字數 2011 閱讀 4413

定位方向:top left right bottom就這四個位置

一、靜態定位
position:static;
靜態定位就是文件流,沒有別的意思,不需要寫

二、絕對定位 (脫標)

position:absolute;
1)如果用top描述,定位的參考點是整個頁面的最左上角,而不是瀏覽器的左上角

2) 如果用bottom描述,參考點是「 瀏覽器首屏視窗尺寸 」,注意:是首屏, 對應當前頁面的左下角(不滾動到下面去)

若無相對定位作參考,則以瀏覽器頁面為參考

當盒子發生巢狀關係時,如果父集元素沒有設定定位,子盒子設定了絕對定位並賦值,子盒子的位置從瀏覽器左上角出發。

(子絕父絕)當盒子發生巢狀關係時,如果父集元素設定了絕對定位,子盒子設定了絕對定位並賦值,子盒子的位置從父集元素左上角出發。

三、相對定位

position:relative;
就是微調元素的位置,讓元素想對自己原來的位置,進行位置調整

1.不脫標,老家留坑,形影分離

本質上元素位置還在原來的地方,只不過飄到別的地方去了(相當於影子)

2.使用相對定位,位置從自身出發

3.還佔據原來的位置。沒有脫標,可用於做微調

四、固定定位

position: fixed;
是相對於瀏覽器視窗定位。頁面如何滾動,這個盒子顯示的位置保持不變。(ie6不相容)

1.脫標

2.固定定位後,以瀏覽器為參考點

(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值多大。

id="a"

style="position:relative;z-index:1;">

id="a-1" >a-1div>

div>

id="b"

style="position:relative;z-index:0;">

id="b-1">b-1div>

div>2) z-index值表示誰壓著誰。數值大的壓蓋住數值小的

3)只有定位了的元素,才能有z-index值(相對定位,絕對定位,固定定位)浮動的盒子不能用。

4)如果都沒有z-index值,或值都相同,那麼誰在html後面,誰就在上面,壓住別人。

id="a">adiv>

id="b">bdiv>

注意:

定位了的元素,永遠能夠壓住沒有定位的元素

層級由低到高:

1.標準流盒子 < 浮動盒子 < 定位盒子

2.background/border < 負z-index < block塊狀水平盒子 < float浮動盒子 < inline/inline-block水平盒子 < z-index:0 < 正index

css定位z index問題

1.某些瀏覽器下元素層級遮蓋存在bug 2.某個元素z index設的太大,導致始終無法被遮蓋 3.js動態計算z index,導致元素覆蓋關係部可控 層級遮蓋bug出現的原因 ie6 7對z index的表現跟ie8及以上瀏覽器不一致。position值為非static時,如果不設定z index...

css定位z index問題

1.某些瀏覽器下元素層級遮蓋存在bug 2.某個元素z index設的太大,導致始終無法被遮蓋 3.js動態計算z index,導致元素覆蓋關係部可控 img 層級遮蓋bug出現的原因 color red ie6 7對z index的表現跟ie8及以上瀏覽器不一致。position值為非static...

定位流之z index屬性

1.固定定位是脫離標準流的,不會占用標準流的空間 2.和絕對定位有點像,也不區分行內塊級元素 3.類似於前面學的背景關聯方式 讓某個背景不隨滾動而滾動 讓某個元素不隨著滾動條的滾動而滾動 ie6不支援固定定位 定義 預設情況所以元素的z index屬性是0 作用是專門用於控制定位流元素的覆蓋關係的 ...