1. 層疊水平

image

當(dāng)兩個(gè)元素層疊水平相同的時(shí)候，這時(shí)候就要遵循下面兩個(gè)準(zhǔn)則：

1. 后來(lái)居上原則
2. 誰(shuí) z-index 大，誰(shuí)在上的準(zhǔn)則

2. 層疊上下文

層疊上下文，你可以理解為 JS 中的作用域，一個(gè)頁(yè)面中往往不僅僅只有一個(gè)層疊上下文(因?yàn)橛泻芏喾N方式可以生成層疊上下文，只是你沒有意識(shí)到而已)，在一個(gè)層疊上下文內(nèi)，我們按照層疊水平的規(guī)則來(lái)堆疊元素。

介紹完層疊上下文的概念，我們先來(lái)看看哪些方式可以創(chuàng)建層疊上下文？

正常情況下，一共有三種大的類型創(chuàng)建層疊上下文：

1. 默認(rèn)創(chuàng)建層疊上下文
2. 需要配合 z-index 觸發(fā)創(chuàng)建層疊上下文
3. 不需要配合 z-index 觸發(fā)創(chuàng)建層疊上下文

一、默認(rèn)創(chuàng)建層疊上下文

默認(rèn)創(chuàng)建層疊上下文，只有 HTML 根元素，這里你可以理解為 body 標(biāo)簽。它屬于根層疊上下文元素，不需要任何 CSS 屬性來(lái)觸發(fā)。

二、需要配合 z-index 觸發(fā)創(chuàng)建層疊上下文

依賴 z-index 值創(chuàng)建層疊上下文的情況：

1. position 值為 relative/absolute/fixed(部分瀏覽器)
2. flex 項(xiàng)(父元素 display 為 flex|inline-flex)，注意是子元素會(huì)創(chuàng)建層疊上下文，不是父元素創(chuàng)建層疊上下文

這兩種情況下，需要設(shè)置具體的 z-index 值，不能設(shè)置 z-index 為 auto（要設(shè)置成z-index: 0），這也就是 z-index: auto 和 z-index: 0 的一點(diǎn)細(xì)微差別。

前面我們提到，設(shè)置 position: relative 的時(shí)候 z-index 的值為 auto 會(huì)生效，但是這時(shí)候并沒有創(chuàng)建層疊上下文，當(dāng)設(shè)置 z-index 不為 auto，哪怕設(shè)置 z-index: 0 也會(huì)觸發(fā)元素創(chuàng)建層疊上下文。

三、不需要配合 z-index 觸發(fā)創(chuàng)建層疊上下文

這種情況下，基本上都是由 CSS3 中新增的屬性來(lái)觸發(fā)的，常見的有：

• 元素的透明度 opacity 小于1
• 元素的 mix-blend-mode 值不是 normal
• 元素的以下屬性的值不是 none：
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• 元素的 isolution 屬性值為 isolate
• 元素的 -webkit-overflow-scrolling 屬性為 touch
• 元素的 will-change 屬性具備會(huì)創(chuàng)建層疊上下文的值

介紹完如何創(chuàng)建層疊上下文概念以及創(chuàng)建方式后，需要說(shuō)明的是，創(chuàng)建了層疊上下文的元素可以理解局部層疊上下文，它只影響其子孫代元素，它自身的層疊水平是由它的父層疊上下文所決定的。

3. 總結(jié)一下如何比較兩個(gè) DOM 元素的顯示順序呢？

1. 如果是在相同的層疊上下文，按照層疊水平的規(guī)則來(lái)顯示元素
2. 如果是在不同的層疊上下文中，先找到共同的祖先層疊上下文，然后比較共同層疊上下文下這個(gè)兩個(gè)元素所在的局部層疊上下文的層疊水平。

**4. css權(quán)重 **參考連接：https://juejin.im/post/5ec374dde51d454d8d5c19b5

• !important,加在樣式屬性值后，權(quán)重值為10000（一般不要使用）
• 內(nèi)聯(lián)樣式，如：style=""，權(quán)重值為1000
• ID選擇器，如：#content，權(quán)重值為100
• 類，偽類和屬性選擇器，如：content、:hover權(quán)重值為10
• 標(biāo)簽選擇器和偽元素選擇器，如：div/p/:before權(quán)重值為1
• 通用選擇器（ * ) 、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權(quán)重值為0

原文：CSS 7階層疊水平 - cecelia - 博客園 (cnblogs.com)