層疊上下文(the stacking context)

層疊上下文是一個三維概念，想象一下HTML元素和面向視窗的用戶之間存在一個z軸，元素是基于自身屬性有序的來占據(jù)這個視窗空間。

層疊上下文的形成

  • 文檔根目錄（html）
  • position為absolute或者relative并且z-index值不為auto
  • position為fixed或sticky
  • flex容器的子元素并且z-index值不為auto
  • grid容器的子元素并且z-index值不為auto
  • opcity值小于1
  • 有mix-blend-mode，且值不為normal
  • 元素包含下列屬性且值不為none
    • transform
    • filter
    • perspective
    • clip-path
    • mask/mask-image/mask-border
  • isolation:isolate
  • -webkit-overflow-scrolling:touch
  • 有will-change屬性，并且為非初始化值
  • contain值為layout或paint或一個包含它們其中一個的組合值（例如contain:strict，contain:content）
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容