css之—堆叠上下文

默认堆叠顺序

demo地址

  • background
  • border
  • 块级
  • 浮动
  • 内联
  • z-index: 0
  • z-index: +

如果是兄弟元素重叠,那么后面的盖在前面的身上

不含z-index的堆叠(Stacking without z-index)

  • demo代码
  • MDN详解

    当没有元素包含z-index属性时,元素按照如下顺序堆叠(从底到顶顺序):

  • 根元素的背景和边界

  • 普通流(无定位)里的块元素(没有position或者position:static;) 按HTML中的出现顺序堆叠
  • 定位元素按HTML中的出现顺序堆叠

float元素的层叠(Stacking and float)

小提示:本案例MDN中的css设置了opacity: 0.7,透明度属性会生成堆叠上下文,造成误解,此处先不设置该属性

  • 根元素的背景与边框
  • 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
  • 浮动块元素
  • 常规流中的后代行内元素
  • 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

使用 z-index(Add z-index)

在第一个例子 Stacking without z-index 中, 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时, 只要给元素指定一个z-index的数值就可以了

该属性必须是整数(正负均可), 它体现了元素在z轴的位置。 如果你对z轴体系不了解, 你也可以把它理解成“层叠”, 每个层都有一个顺序数, 顺序数大的层在上面, 小的在下面

注意!z-index只对指定了 positioned(即position不为static的)属性的元素有效。

  • 底层: 距离观察者最远
  • -3 层
  • -2 层
  • -1 层
  • 0 层 默认层
  • 1 层
  • 2 层
  • 3 层
  • 顶部: 最接近观察者

    1
    2
    当没有指定z-index的时候, 所有元素都在会被渲染在默认层(0层)
    当多个元素的z-index属性相同的时候(在同一个层里面),那么将按照 Stacking without z-index 中描述的规则进行布局。
  • demo地址

  • MDN详解

元素div#5 的z-index无效, 因为他没有被指定position属性。

注意! positioned元素,z-index值越大 越靠近用户,显示在上面

层叠上下文(The stacking context)

文档中的层叠上下文由满足以下任意一个条件的元素形成

  • 根元素 (HTML),
  • z-index 值不为 “auto”的 绝对/相对定位,
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
  • opacity 属性值小于 1 的元素(参考 the specification for opacity),
  • transform 属性值不为 “none”的元素,
  • mix-blend-mode 属性值不为 “normal”的元素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation 属性被设置为 “isolate”的元素,
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值(参考 这篇文章)
  • -webkit-overflow-scrolling 属性被设置 “touch”的元素

符合上述任一条件,就会生成一个层叠上下文。

我个人将层叠上下文理解为类似于js中作用域的一种环境

  • 上下文可以包含于被包含,
  • 上下文内部元素如何排序与外部无关
  • 子元素的 z-index 值只在父级层叠上下文中有意义
  • demo地址
  • MDN详解

  • Root(html标签)

    • Div#1 ——————->z-index:5
    • Div#2 ——————->z-index:2
    • Div#3 ——————->z-index:4
      • Div#4 ——————->z-index:6
      • Div#5 ——————->z-index:1
      • Div#6 ——————->z-index:3

注意 DIV#4,DIV #5 和 DIV #6 是 DIV #3 的子元素,所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成,DIV #3 元素作为一个整体传递给 root 元素,并相对兄弟元素层叠

上面一段话可以概括成z-index不会垮层级去做比较

分辨出层叠的元素在 Z 轴上的渲染顺序的一个简单方法是将它们想象成一系列的版本号,子元素是其父元素版本号之下的次要版本。

  • Root
  • DIV #2 - z-index 为 2
  • DIV #3 - z-index 为 4
    • DIV #5 - z-index 为 1,在一个 z-index 为 4 的元素内层叠,所以渲染次序为 4.1
    • DIV #6 - z-index 为 3,在一个 z-index 为 4 的元素内层叠,所以渲染次序为 4.3
    • DIV #4 - z-index 为 6,在一个 z-index 为 4 的元素内层叠,所以渲染次序为 4.6
  • DIV #1 - z-index 为 5

感谢您的阅读,本文由 DSYING 版权所有。如若转载,请注明出处:DSYING(http://yoursite.com/2018/08/26/css-堆叠上下文/
css之—flex布局