即在相同的层叠上下文的情况下,各个属性内容叠在上面的优先级,从下往上是:

  1. 背景和边框 (Background & Borders):最底层,地基。
  2. 负 z-index (-ve z-index)z-index 为负值的定位元素(Positioned)。
  3. 块级盒子 (Block):普通的 div 等,用于布局。
  4. 浮动盒子 (float)float 元素。
  5. 行内盒子 (Inline)span、文字内容。
    • 注意: 浏览器认为内容(文字)比布局(块/浮动)更重要,所以文字默认会浮在 div 上面。
  6. z-index: auto / 0z-index 为 0 或 auto 的定位元素。
  7. 正 z-index (+ve z-index)z-index > 0 的定位元素(数值越大越靠上)。