css层叠上下文

本页目录：
元素之间有重叠，浏览器要怎么展示呢
怎么确定元素层叠关系
层叠上下文
层叠顺序
实操一下看

元素之间有重叠，浏览器要怎么展示呢#

当我们在编写html+css时，常常会遇到元素覆盖的问题，那解释器是怎么解释元素的覆盖的呢？

• 首先我们比确定的是，相邻的普通元素，都是后者覆盖前者的

但是对于相对较远的元素，拥有其他css属性（例如z-index）的属性呢？

• emmmm，z-index值越大就越靠上？？
• nono，解释器不是这么简单粗暴的
• 下面我们就来探讨一下 层叠上下文 对元素 层叠关系的影响

怎么确定元素层叠关系#

前端页面元素的覆盖关系由 所属的层叠上下文 和 元素本身的层叠顺序 决定

先看层叠上下文，再看层叠顺序

层叠上下文#

1. 层叠上下文是页面元素的一种属性，页面由普通元素组成，一些元素因为种种原因而带有了层叠上下文

2. 产生层叠上下文的种种原因：

   1. 页面根元素html天生具有层叠上下文，称之为“根层叠上下文”
   2. 普通元素满足以下条件时具有层叠上下文：a.position值非static b.z-index值非auto
   3. CSS3中的新属性也可以产生层叠上下文

3. 所有元素的层叠关系都是相对于 最近父层叠上下文元素 来说的

层叠顺序#

1. 层叠关系要在同一个层叠上下文中比较，两元素不在同一个层叠上下文则向上寻找，直到同一个层叠上下文，比较 最开始包含自己的层叠上下文（若有）|| 元素本身
2. 当将两者提升到同一个层叠上下文后，根据下图层叠顺序图来判断层叠关系

逻辑图如下：

实操一下看#

• 建议判断层叠关系时，都在脑海中画一下上图虚拟DOM树

比较下以下几个元素的覆盖关系：
B5-C3
B2-B5
C1-C2
C3-B5
C1-B1

根据怎么确定元素层叠关系，先看层叠上下文，再看层叠顺序

1. 看层叠上下文

   B5-C3 => A4-A3   
   B2-B5 => B2-A4   
   C1-C2 => A1-B3   
   C3-B5 => B4-B5   
   C1-B1 => C1-B1   
   

2. 再根据层叠顺序的规则去判断元素的层叠关系吧！！！