css层叠上下文

一、层叠上下文

  1. 上下文定义:

① 一个参与多方构建的,遵循一定规则的,独立的环境
②子项可能创建新的独立的环境,与外层的环境有同样的规则,可是却会和外层隔绝。

橙色的球里面有4个球,然后第4个球里面还包含了2个球,是独立的,与外层是隔离的。
  1. 先了解一下z-index属性

①z-index不设置的时候默认是auto,设置时只能取整数,如"1,2,-1,-2...",z-index: 0; 和z-index: auto;会完全不一样。
②z表示垂直屏幕方向,也就是说z-index值越大离我们越近,反之则越远,
③z-index只对指定了position属性的元素有效。
④没有指定z-index时,所有元素都在默认层(0层)被渲染
⑤当多个元素的z-index属性相同时(在同一层里面),则按照正常文档流的顺序出现。

z-index的值距离用户的距离
  1. 层叠上下文定义:

①层叠上下文是HTML元素的三维概念,可以想象为一条垂直于视窗的z轴。
②当元素创建了重叠上下文时,就可以说这个元素有了一个z轴,
③内部的子元素发生重叠时,会依据自身属性优先级顺序占用z轴(重叠上下文)上的空间,
④优先级最大的元素排在最上面,离用户也最近。

层叠上下文是HTML元素的三维,除了有x轴和y轴,还有一个表示层叠的z轴。
内部的子元素发生重叠时,会依据自身属性优先级顺序占用z轴(重叠上下文)上的空间,优先级最大的元素排在最上面,离用户也最近。
  1. 层叠上下文形成的条件:

①根元素
②z-index不为auto的绝对定位和相对定位元素
③fixed定位元素和sticky定位元素
④z-index不为auto的flex item
⑤z-index不为auto的grid item
⑥opacity小于1的元素
⑦transform不为none的元素

  1. 层叠规则:

①属于同一层叠上下文的同级元素比较,
②当层叠上下文属于某一层级时,其内的层叠上下文度属于对应层级。

举例:
Root

  • DIV #2 - z-index 是 2
  • DIV #3 - z-index 是 3
    • DIV #5 - z-index是1,因为父层叠上下文是4,所以自己是4.1
    • DIV #6 - z-index是3,因为父层叠上下文是4,所以自己是4.3
    • DIV #4 - z-index是6,因为父层叠上下文是4,所以自己是4.6
      比较:
      ① #1 #2 #3在同一层叠上下文Root中,#1>#3>#2
      ② #5 #6 #4在同一层叠上下文#3中, #4>#6>#5
      ③ z-index:5>z-index:4同时z-index:5>z-index:4.6
  1. z-index举例测试
    ①没有设置z-index的层叠情况
    • 只有一个层叠上下文,只有html根元素,所以是按照DOM顺序排列,下面的元素越靠前(靠近观察者) 。
高→低顺序:box4>box3>box2>box1

②定位元素设置了z-index层叠情况

  • box2和box4设置了z-index值,
  • 在根元素里面,box1234是同级的,所以就比较z-index的值,z-index值越大越靠前,没有设置z-index值就按照DOM顺序。


    高→低顺序:box4>box2>box3>box1

③box1234都设置了z-index值

  • 创建了5个上下文: 根元素, box1, box2, box3, box4

  • 根元素上下文包含box1和box3,box1包含box2, box3包含box4

  • box1和box3对比,box1的z-index值比box3要大,box1在box3前面;在box1上下文里面box2在box1前面、box3上下文里面box4在box3前面,所以box2>box1>box4>box3


    高→低顺序:box2>box1>box4>box3
  • 在根元素的上下文中,box5没有设置z-index值,所以是最下面


    高→低顺序:box2>box1>box4>box3>box6>box5
  1. 层叠顺序总结
    ①没有设置z-index的场景,从低→高顺序
  • 根元素的背景和边框
  • 普通流(无定位)里的块元素(没有position或者position: static;)按照html中的出现顺序堆叠
  • 定位元素按html中的出现顺序堆叠


    高→低顺序:div4>div3>div2>div1>div5

②带浮动的场景,从低→高顺序

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


    从高→低顺序:div5-div1-di3-div2-div4

参考:饥人谷课件

你可能感兴趣的:(css层叠上下文)