CSS中z index的屬性與使用

2022-07-12 05:03:10 字數 545 閱讀 4184

z-index 屬性指定乙個元素的堆疊順序。

擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

z-index 僅能在定位元素上奏效,z-index 進行定位元素(position:absolute, position:relative, or position:fixed)。

瀏覽器支援:

所有主流瀏覽器都支援 z-index 屬性。

注釋:任何的版本的 internet explorer (包括 ie8)都不支援屬性值 "inherit"。

z-index可等的值:

z-index:auto  預設,堆疊順序與父元素相等

z-index:number ;  設定元素的堆疊順序,自己設定

z-index:inherit;規定應該從父元素繼承z-index屬性的值

元素可擁有負的 z-index 屬性值。

該屬性設定乙個定位元素沿 z 軸的位置,z 軸定義為垂直延伸到顯示區的軸。如果為正數,則離使用者更近,為負數則表示離使用者更遠。

更加深入體會z-index的用法請跳轉到:第37行**)

css中的z index屬性

參考 先說下總結 1 z index 必須結合relative或absolute才有效 2 兄弟元素之間 z index 0 z index auto z index不寫效果是一樣的,他們之間按照書寫的順序去覆蓋 3 如果想讓父元素覆蓋掉子元素,就要使子元素的z index為負值同時父元素還不能設定...

關於css中的z index 屬性

檢索或設定物件的層疊順序。較大 number 值的物件會覆蓋在較小 number 值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 number 值,那麼將依據它們在html文件中宣告的順序層疊。對於未指定此屬性的絕對定位物件,此屬性的 number 值為正數的物件會在其之上,而 number 值...

CSS中z index屬性具體

層相對於螢幕縱深方向的順序。你用幾個層疊在一起就可看出它的含義。如以下是相關測試 z index 2 background color red z index 1 top 20px background color blue 說明 第乙個div模組中,我們定義了寬度為150,高度為100,背景色為紅...