CSS----z-index 屬性詳解
用途:
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
該屬性設定一個定位元素沿 z 軸的位置,z 軸定義為垂直延伸到顯示區的軸。
注意:
z-index 屬性值可以是負的, 如果為正數,則離使用者更近,為負數則表示離使用者更遠。
z-index 僅能在定位元素上奏效(position:relative/absolute/fixed;)
這個屬性不會作用於視窗控制元件,如select物件。
可能的屬性值:
值 | 描述 |
---|---|
auto | 預設。堆疊順序與父元素相等。 |
number | 設定元素的堆疊順序。 |
inherit | 規定應該從父元素繼承 z-index 屬性的值,任何的版本的 Internet Explorer (包括 IE8)都不支援屬性值 "inherit"。 |
不使用 z-index時堆疊順序
不使用z-index的情況,也是預設的情況,即所有元素都不用z-index時,堆疊順序如下(序號越大優先順序越高):
- 根元素(即HTML元素)的background和borders
- 正常流中非定位後代元素
- 已定位後代元素
即所有定位元素
但非定位元素和非定位元素之間和 定位元素和定位元素之間的順序取決於HTML文件出現順序, 靠後的優先
浮動z-index堆疊順序
浮動元素z-index位置介於非定位元素和定位元素之間, 堆疊順序如下(序號越大優先順序越高):
- 根元素(即HTML元素)的背景和border
- 正常流中非定位後代元素
- 浮動元素
- 正常流中inline後代元素
- 已定位後代元素
浮動元素之間是不會出現z-index重疊的
非定位元素和非定位元素之間和 定位元素和定位元素之間的順序同上取決於HTML文件出現順序, 靠後的優先
z-index元素之間的堆疊順序
再次強調z-index只適用於已經定位的元素(即position:relative/absolute/fixed)
簡單來說就是z-index的值越大優先順序越高越靠上, 但是事實上沒這麼簡單
子元素的z-index值只在父元素範圍內有效,什麼意思呢?
每一個定位元素都歸屬於一個stacking context。根元素形成root stacking context,而其他的stacking context則由定位元素產生(此定位元素的z-index被定義一個非auto的z-index值),定位子元素會以這個local stacking context為參考,用相同的規則來決定層疊順序。
當stacking context一樣的時候,就用z-index的值來決定怎樣顯示,如果z-index也相同(即stack level相同),則按照檔中後來者居上的原則(back-to-front )的順序來層疊。
舉個例子:
定位元素A(z-index:100)裡面有定位元素A1(z-index:300),而定位元素B和元素A兄弟關係(z-index:200)。你會發現無論A1的z-index是多大,也會被z-index是200的B所覆蓋,因為A的z-index只有100。
z-index的堆疊順序是比較複雜的, 本篇只介紹一些簡單的堆疊順序, 推薦一個比較詳細的說明:
https://www.cnblogs.com/starof/p/4424926.html