CSS中層疊和CSS的7階層疊水平

2021-09-19 19:21:34 字數 1767 閱讀 7484

今天搜尋資料時,忽然發現了以前沒注意的乙個知識點,所以拖過來搞一搞,這個知識點叫做css的7階層疊水平

在說這個知識之前,我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平

這個東西就是z-index屬性(此篇為上篇,僅僅講z-index)

基本含義:

z-index通俗來說就是在z軸上的索引,z軸是垂直於電腦螢幕的一根軸

用來設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面,即通常情況下,z-index為2的元素會在z-index為1的元素上面

取值情況:

z-index有三個取值

auto:預設。堆疊順序與父元素相等。

number:設定元素的堆疊順序。

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

特性:

1.支援負值(如果為正數,則離使用者更近,為負數則表示離使用者更遠。)

2.支援css3 animation動畫;(並沒什麼實用應用場景)

3.在css2.1時代,需要和定位元素配合使用,如果不考慮css3,只有定位元素(position:relative/absolute/fixed/sticky)的z-index才有作用!在css3中有例外

準則:

1.後來者居上原則

執行結果:

解析:我們可以看到,紅色作為後來的元素覆蓋在之前的元素上了,在未設定z-index的前提下,後來元素會覆蓋前面新增到元素,當然實在開啟了絕對定位的前提下(不開啟絕對定位不能直觀的看到效果)

2.誰大誰先上原則

在.a新增z-index:2,在.b新增z-index:1

執行結果:

解析:通常情況下,z-index越大,層級越高,越在上面

當發生巢狀時,祖先優先原則

執行結果:

解析:按照前面所說應該是藍色的格仔會在最上面,這裡並沒有,原因就是祖先優先原則

a的層級大於b的層級,所以a裡面的元素會始終在b的上面,即使b的子元素的z-index為10000也沒用

注意:

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

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

**成就萬世基基沙鎮海 夢想永在凌雲意意氣風發

CSS中層疊和CSS的7階層疊水平

今天搜尋資料時,忽然發現了以前沒注意的乙個知識點,所以拖過來搞一搞,這個知識點叫做css的7階層疊水平 在說這個知識之前,我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平 這個東西就是z index屬性 此篇為上篇,僅僅講z index 基本含義 z index通俗來說就是在z軸上的...

CSS中層疊和CSS的7階層疊水平(上篇)

1.後來者居上原則 複製 document 複製 執行結果 解析 我們可以看到,紅色作為後來的元素覆蓋在之前的元素上了,在未設定z index的前提下,後來元素會覆蓋前面新增到元素,當然實在開啟了絕對定位的前提下 不開啟絕對定位不能直觀的看到效果 2.誰大誰先上原則 在.a新增z index 2,在...

CSS中層疊和CSS的7階層疊水平(上篇)

今天搜尋資料時,忽然發現了以前沒注意的乙個知識點,所以拖過來搞一搞,這個知識點叫做css的7階層疊水平 在說這個知識之前,我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平 這個東西就是z index屬性 此篇為上篇,僅僅講z index 基本含義 z index通俗來說就是在z軸上的...