層疊上下文

1.概念

stacking context
網(wǎng)頁中的元素級別不同，有z軸

2.層疊水平

普通元素的層疊水平優(yōu)先由層疊上下文決定，層疊水平的比較只有在當前層疊上下文元素中才有意義
老時代層疊順序：

  • 正z-index
  • z-index: 0
  • inline / inline-block 內(nèi)聯(lián)盒子
  • float 浮動盒子
  • block 塊級水平盒子
  • 負z-index
  • 層疊上下文 background/border

內(nèi)聯(lián)元素層疊順序要比浮動元素和塊狀元素要高
優(yōu)先顯示的順序是：
inline和inline-block一般是內(nèi)容
float和block一般是布局
background和border一般是裝飾

層疊黃金準則：
1.誰大誰上
z-index值大的那個覆蓋z-index小的那個
2.后來居上
層疊水平一直，層疊順序相同時，在DOM流中處于后面的元素會覆蓋前面的元素

3.層疊上下文的創(chuàng)建

  • 根層疊上下文
    html標簽，絕對定位時，如果沒有其他元素限制，就會相對瀏覽器窗口定位的原因

  • z-index為數(shù)值的定位元素的傳統(tǒng)層疊上下文

  • 其他css3屬性

  • z-index: 0所在的div是層疊上下文元素，而z-index: auto所在的div是一個普通元素，里面兩個的層疊比較就不受父級影響，誰大誰上的準則

  • z-index一旦變成數(shù)值，都會創(chuàng)建一個層疊上下文，每個層疊上下文是自成體系的，當元素發(fā)生層疊時，整個元素被任務(wù)是在父層疊上下文的層疊順序中

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容