渲染層、堆疊次序與z-index

渲染層

渲染層創建條件

  • 頁面的根元素<html>創建了默認的堆疊上下文
  • 成為定位元素且具有非auto的z-index屬性值
  • 元素具有小于 1 的 opacity 屬性
  • 在 Webkit 和 Chrome 22+ 中，固定定位的元素，即使 z-index 為 auto，也會創建
  • transform 屬性不為 none

堆疊次序

默認堆疊次序

沒有z-index屬性的元素，按照一下順序從底到頂依次排列

  1. 根節點的背景和邊框
  2. 文檔流中的后代元素，按照在HTML中出現的順序
  3. 浮動元素
  4. 脫離文檔流的定位后代元素，按照在HTML中出現的順序
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1贊 92
  • CSS 定位 CSS有三種基本的定位機制：普通流，浮動，絕對定位(absolute, fixed)：普通流是默認定...
    _空空閱讀 5,825評論 0贊 15
  • 一:在制作一個Web應用或Web站點的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的...
    Arno_z閱讀 1,232評論 0贊 1
  • 1.z-index基礎 z-index屬性指定了元素及其子元素的[z順序]，而[z順序]可以決定當元素發生覆蓋的時...
    徐國軍_plus閱讀 6,431評論 1贊 6
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表，主要用...
    寥寥十一閱讀 1,882評論 0贊 6