• 不支持z-index的層疊上下文元素的層疊順序均是z-index: auto級別

Paste_Image.png

• 依賴z-index的層疊上下文元素的層疊順序取決于z-index值
• position值為relative/absolute或fixed(部分瀏覽器）
• display:flex|inline-flex容器的子flex項 (但是該元素還是普通元素，并不是z-index的容器)

Paste_Image.png

Paste_Image.png

• 做動畫的時候，如果用opacity來做動畫， 會出現(xiàn)，動畫完成之后， 文字才出現(xiàn)

Paste_Image.png

Paste_Image.png

z-index 原則

1. 最小化影響 （看relative 那一章， 專門創(chuàng)建一個div來做zindex容器）

2. 不犯二原則 （不是浮層元素，不要使用大于2 的z-index）
   首先要避免設置z-index。
   靈活運用 層疊順序，后來居上， 層疊水平

3. 組件層級計數(shù)器
   用js獲取當前最大的z-index值再加一

4. 可訪問性隱藏
   用z-index 來隱藏元素。 人看不見，但是其他設備可以發(fā)現(xiàn)