堆叠上下文

welkinz
380 阅读1分钟

堆叠顺序

在没有触发堆叠上下文的情况下，堆叠顺序是: bg < border <负z-index < 块级 < float < 文字/内联 < position: relative; < 正z-index

(图来自张鑫旭博客)

层叠上下文

参考：www.zhangxinxu.com/wordpress/2…

子元素层叠上下文是由父层叠上下文决定的

层叠上下文规则：

  • 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-index值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
  • 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

如何产生层叠上下文

默认创建的层叠上下文

  • 文档根元素（<html>）

z-index值为数值的定位元素的传统层叠上下文

父元素z-index值为数值是为了令子元素层叠水平一致

  • position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；

实例：jsbin.com/notoyerixo/…

实例：jsbin.com/vehevevuwi/…

  • position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素

CSS3与新时代的层叠上下文

avatar
文章
阅读
粉丝