定義
- z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
*注釋
- z-index只對(duì)設(shè)置了position 屬性為 relative, absolute 或者 fixed 的元素才生效.
- z-index 可以為負(fù)值
層級(jí)關(guān)系的比較規(guī)則
- 對(duì)于同級(jí)元素话告，正常流中的元素后面的會(huì)覆蓋前面的。
<div class="box1">box1</div>
<div class="box2">box2</div>
-
對(duì)于同級(jí)元素俺猿，設(shè)置了定位同時(shí)設(shè)置了z-index的元素魏颓，z-index大的會(huì)覆蓋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è)置了定位的元素鼻听，會(huì)覆蓋沒有設(shè)置定位的元素或position為static的元素财著。
未設(shè)置z-index的元素不會(huì)參與層級(jí)關(guān)系的比較，而設(shè)置了z-index=0后撑碴，就會(huì)參與層級(jí)關(guān)系的比較撑教，其位置就會(huì)在z-index為負(fù)數(shù)的同級(jí)元素的前面，在z-index為正數(shù)的同級(jí)元素的后面醉拓。
如果所有節(jié)點(diǎn)都定義了 position:relative. z-index 為 0 的節(jié)點(diǎn)與沒有定義 z-index 在同一層級(jí)內(nèi)沒有高低之分; 但 z-index 大于等于 1 的節(jié)點(diǎn)會(huì)遮蓋沒有定義 z-index 的節(jié)點(diǎn); z-index 的值為負(fù)數(shù)的節(jié)點(diǎn)將被沒有定義 z-index 的節(jié)點(diǎn)覆蓋.
對(duì)于父子元素伟姐，若父元素不設(shè)置z-index，那么子元素的z-index會(huì)生效廉嚼，比如設(shè)置為負(fù)玫镐，就會(huì)在父元素下層。
- 子元素z-index跟隨父元素
- 如果同級(jí)的A, B 節(jié)點(diǎn)都定義了 position:relative, A 節(jié)點(diǎn)的 z-index 比 B 節(jié)點(diǎn)大, 那么 A 的子節(jié)點(diǎn)必定覆蓋在 B 的子節(jié)點(diǎn)前面.
- 如果所有節(jié)點(diǎn)都定義了 position:relative, A 節(jié)點(diǎn)的 z-index 和 B 節(jié)點(diǎn)一樣大, 但因?yàn)轫樞蛞?guī)則, B 節(jié)點(diǎn)覆蓋在 A 節(jié)點(diǎn)前面. 就算 A 的子節(jié)點(diǎn) z-index 值比 B 的子節(jié)點(diǎn)大, B 的子節(jié)點(diǎn)還是會(huì)覆蓋在 A 的子節(jié)點(diǎn)前面.
