元素层级提高

一、7阶层叠水平

一般了解z-index，position(值非static)，display ，float:left 可以控制元素的层级。经过例子验证，当元素有内容时，内容的层级会更高。

任何元素都有层叠顺序，当元素发生层叠时，层级高的会显示在上面，覆盖层级低的元素。当元素的层级相同时，则会根据DOM的先后顺序依次显示。层叠优先级如下图所示：

二、层叠上下文

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向视点或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占据着层叠上下文的空间。 页面的根元素具有根层叠上下文。

当元素有层叠上下文时，其层级比普通元素（block元素，float元素等）要高还有其他的方法，通过给元素设置如下属性即可让元素拥有层叠上下文环境，，下面的四种是较常用的。给元素设置上面这些属性后，即可提高元素的层级。提高的层级在z-index:0的位置。当元素都有较高的z-index值时，层叠顺序按值的高低排列。当我们遇到元素层叠的现象时，找出元素是属于哪个层级的，修改元素的属性或者创建层叠上下文来调整元素的层级。

①定位元素中z-index不等于auto，为大于0的值

②元素设置opacity为不等于1的值

③元素的transform属性不为none

④will-change指定的属性值为上面任意一个（了解）

!DOCTYPE html>