z-index属性的深入分析

一、Z指数七类堆叠顺序表

1个的大小。堆叠序列比较。

背景/边框<负z-index <块块级盒子<浮浮箱<内联/内联块级盒子< Z指数：汽车或Z指数：0 / Z上下文无关<正z-index。

2。层次高的元素覆盖低层次的元素。

二、Z指数和创建层叠上下文

1，首先，我们应该注意到，虽然Z指数：汽车可以看作是Z指数：0，它只是在堆叠顺序的比较。从堆栈中，这两者之间有本质的区别：汽车不会创造层叠上下文，和Z指数：0将创造层叠上下文。

请注意这是一个特殊的情况，即在IE7，汽车也将创造层叠上下文不符合标准。

2.z-index级联序列比较停在父层语境

当视图被控制时，如果父元素没有上下文的话，父元素总是找到根元素作为上下文的一层。

3.z-index：数字+元素属性配合获得层叠上下文

（1）（1）位置：绝对相对/位置：固定在Firefox IE浏览器下；

当z-index值自动，元素仍然是一个常见的元素，而当z-index的值是一个具体的数字，堆栈上下文将被创建

（2）Flex项（显示：Flex /内联弯曲；显示：Flex /内联弯曲；），z-index值不是汽车

层叠上下文元素是一个灵活的子元素，而不是一个Flex容器元素

4。你可以创造层叠上下文不需要配合的特性：数字

（1）元素的不透明值不是1；

元素的转换值不是；

（3）元素混合模式（混合模式）的值不正常；

（4）元件的过滤器（过滤器在CSS3不是过滤器，私人在IE6 / 7 / 8 / 9）是不；

元素的隔离（隔离）值是隔离的（元素是隔离的）。

隔离：隔离宣言应运而生的mix-blend-mode.by默认，搅拌方式将Z轴堆叠在以下元素。如果我们不想让一组元素参与混合，那么可以使用隔离。

位置：固定语句，浏览器（Firefox或IE）到Z指数：与数字属性值会改变任何一个上述规定

变化的作用：增强页面渲染性能，也就是准备GPU（图形处理器），使浏览器能够加快渲染速度。

什么是GPU（图形处理器）GPU是一个涉及处理和绘图graphics.gpu是专为进行复杂的数学和几何计算硬件。它使CPU从图形处理任务中解放出来，以便执行系统任务，如页面的计算和重新粉刷。

当我们通过一定的行为（点击、移动或滚动）触发页面时大面积图，浏览器往往没有准备，只能被动地使用CPU计算和重绘，由于事先没有准备，渲染的不够，然后丢帧卡顿，和，将改变之前触发告诉浏览器的一个实际行动，提前预约的突然来访，匆忙。

元素- WebKit溢出滚动设置触摸（移动端滚动原生）

5。重叠不支持z-index层元素上下文序列Z指数：汽车；

6。为什么定位元素覆盖普通元素

例如，当相对位置：用图片，图片是Z指数：当时汽车，画面的堆叠顺序>当内联元素（普通图片文字是内联元素，堆叠顺序是内联/内联块），那么它将被覆盖。

三注意的一些原则，Z指数的相关实践

1。影响原则最小化

目的：避免z-index混乱嵌套重叠

原因是：（1）元素的层次层次主要由元素的重叠上下文决定。

（2）IE7 z-index：汽车；同时一层新的上下文将建

实践：（1）避免使用位置属性

位置属性从大型容器的平面级别分离到私有的小容器（相对进程）。

2。不要制定两个标准

目的：避免z-index混乱，一山比一座山的风格问题

原因：多人协作和后期维护

做法：非浮层的元素，避免设置z-index值，没有理由可以超过2。

（浮动层元素：比如一个炸弹盒，拖在页面上）

三.组件级计数器

目的：避免因回浮层覆盖Z元件的问题

原因是：（1）总是会出现意想不到的高级元素（比如其他团队参与，或者互联网上的其他组件）。

组件的覆盖规则是动态的（例如，页面有大量的炸弹）。

方法：组件级计数器的方法：身体的元素的最大值是通过js的Z。

例如，组件默认值是m，主体是n（n m），然后将组件设置为n + 1。

4。易接近的隐藏的人体是无形的，但辅助装置能识别的隐蔽性。

Z指数负面因素以上重叠的背景下，在其他要素

做法：特性：1；

Eg：HTML代码：
xml代码将内容复制到剪贴板。
提交

CSS代码：
xml代码将内容复制到剪贴板。
{ } {类型=提交位置：绝对；Z指数：1；}

z-index属性的上述分析是小编辑的全部内容，希望能给大家一个参考，也希望你有很多的支持。