美文网首页
CSS连载(二、堆叠上下文)

CSS连载(二、堆叠上下文)

作者: 赵学习 | 来源:发表于2019-02-26 18:06 被阅读0次

关于


CSS连载(二、堆叠上下文)
  1. background
    2.border
    3.块级
    4.浮动
  2. 内联
  3. z-index: 0
  4. z-index: +

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

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

可以理解为堆叠作用域。跟 BFC 一样,我们只知道一些属性会触发堆叠上下文,但并不知道堆叠上下文是什么。

根元素 (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"的元素

相关文章

  • CSS连载(二、堆叠上下文)

    关于 background2.border3.块级4.浮动 内联 z-index: 0 z-index: + 如果...

  • CSS深入浅出-堆叠上下文

    本博客主要讲CSS的堆叠顺序以及什么是堆叠上下文和堆叠上下文的作用。 堆叠上下文 导读 1.什么是堆叠顺序2.什么...

  • CSS 堆叠上下文

    1:什么是堆叠顺序 1:什么是堆叠上下文 参考:张鑫旭博客 css-stacking-context-order-...

  • CSS堆叠上下文

    1,堆叠顺序 1,background,2,border,3,块级元素,4,浮动元素,5,内联元素,6,绝对/相对...

  • CSS 堆叠上下文

    一、什么是堆叠上下文 堆叠上下文(stacking context)是 HTML 中的一个三维的概念。这些 HTM...

  • css—堆叠上下文

    一、堆叠顺序 如图可分为八层:负z-index --- background --- border --- blo...

  • 什么是堆叠上下文?

    首先我们需要了解css中堆叠顺序的概念在没有触发堆叠上下文时,正常的堆叠顺序应该为:负z-index

  • 堆叠上下文

    堆叠顺序堆叠顺序 堆叠上下文 堆叠上下文 https://developer.mozilla.org/zh-CN/...

  • CSS堆叠顺序以及堆叠上下文

    css堆叠顺序:1、background2、border3、块级4、浮动5、内联6、z-index: 07、z-i...

  • CCS深入2堆叠上下文

    堆叠顺序 堆叠上下文 堆叠上下文对z-index得影响 参考1 参考2

网友评论

      本文标题:CSS连载(二、堆叠上下文)

      本文链接:https://www.haomeiwen.com/subject/dwrzyqtx.html