css 层叠上下文和层叠顺序

2021年7月18日 2点热度 0条评论 来源: Claiyre

层叠上下文是css中的一个三维概念,拥有层叠上下文的元素在z轴上比普通元素要高,而且其内部的所有内容是自成体系的,其后代都是在它的层叠顺序中

哪些元素拥有层叠上下文

1、根元素,也就是html默认拥有“根层叠上下文”
2、定位元素(position: absolute/relative/fixed)的z-index不为auto,而是有具体数值时
3、拥有某些css3属性的元素

  • z-index不为auto的 flex item
  • opacity的值小于1的元素
  • transform不为none
  • filter不为none
  • isolation的值是isolate
  • mix-blend-mode不为normal
  • 设置了will-change
  • 元素的-webkit-overflow-scrolling设为touch.

举个例子,如一个opacity:0.6的元素是层叠上下文,在一个普通元素的上面

<div style="background: blue; opacity: 0.6;">div1</div>
<div style="background: red; margin-top: -80px">div2</div>

上面只是一个比较简单的规则,在实际中有各种元素,那在css中不同元素的层叠顺序是怎样的呢?

css中元素的层叠顺序

css中的元素的层叠顺序,自底向上,遵循如下排列规则:

  1. border/background等装饰在最下面
  2. 接着是z-index为负的元素
  3. block块状水平盒子元素
  4. float盒子元素
  5. inline、block-inline元素
  6. z-index为auto/0、不依赖z-index的层叠上下文元素
  7. z-index为正的元素

这个规则不用死记硬背,结合每种元素的作用便很好理解&记忆了

  • border和background通常用作装饰,所以优先级最低,接着是z-index为负的元素
  • block盒子和float通过用来定位布局,而inline通常是重要的文本内容,所以有消极比block和float高
  • 接着就是z-index为0或auto的元素或没有z-index的普通层叠上下文元素了
  • 最高的就是z-index为正的元素了

按照上面的层叠顺序,如有冲突的话,遵循这两个规则即可:
1、z-index大者居上
2、后来者居上

z-index

z-index定义了元素在z轴上的顺序,值越大,元素的层级越高越靠上。但需要注意的是:z-index只有在定位元素和flex item上才生效,在其他元素是即便设置了也没有用。

如下,两个层叠上下文,第一个的z-index大,但第一个还是在下面:

<div style="background: blue;transform: translateX(50px);z-index: 5">div1</div>
<div style="background: red;transform: translateY(-80px);z-index: 1">div2</div>

而且元素一旦拥有定位,其z-index就会生效,auto被视为0级别(但实际上不是0,只是视为,此时元素还不是层叠上下文),flex item元素同理。

所以即便一个元素只设置了定位,还不是层叠上下文,但是此时该元素的z-index已经被视为0了,所以该元素会在普通元素的上面。

参考:

    原文作者:Claiyre
    原文地址: https://www.cnblogs.com/nuannuan7362/p/15023829.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。