定義
- z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
*注釋
- z-index只對設(shè)置了position 屬性為 relative, absolute 或者 fixed 的元素才生效.
- z-index 可以為負值
層級關(guān)系的比較規(guī)則
- 對于同級元素，正常流中的元素后面的會覆蓋前面的。
<div class="box1">box1</div>
<div class="box2">box2</div>
-
對于同級元素，設(shè)置了定位同時設(shè)置了z-index的元素，z-index大的會覆蓋z-index小的元素。
<div class="box1" style="position:relative; z-index:2">box1</div>
<div class="box2" style="position:relative; z-index:1">box2</div>
設(shè)置了定位的元素，會覆蓋沒有設(shè)置定位的元素或position為static的元素。
未設(shè)置z-index的元素不會參與層級關(guān)系的比較，而設(shè)置了z-index=0后，就會參與層級關(guān)系的比較，其位置就會在z-index為負數(shù)的同級元素的前面，在z-index為正數(shù)的同級元素的后面。
如果所有節(jié)點都定義了 position:relative. z-index 為 0 的節(jié)點與沒有定義 z-index 在同一層級內(nèi)沒有高低之分; 但 z-index 大于等于 1 的節(jié)點會遮蓋沒有定義 z-index 的節(jié)點; z-index 的值為負數(shù)的節(jié)點將被沒有定義 z-index 的節(jié)點覆蓋.
對于父子元素，若父元素不設(shè)置z-index，那么子元素的z-index會生效，比如設(shè)置為負，就會在父元素下層。
- 子元素z-index跟隨父元素
- 如果同級的A, B 節(jié)點都定義了 position:relative, A 節(jié)點的 z-index 比 B 節(jié)點大, 那么 A 的子節(jié)點必定覆蓋在 B 的子節(jié)點前面.
- 如果所有節(jié)點都定義了 position:relative, A 節(jié)點的 z-index 和 B 節(jié)點一樣大, 但因為順序規(guī)則, B 節(jié)點覆蓋在 A 節(jié)點前面. 就算 A 的子節(jié)點 z-index 值比 B 的子節(jié)點大, B 的子節(jié)點還是會覆蓋在 A 的子節(jié)點前面.
