Shulou(Shulou.com)06/03 Report--

This article introduces you how to understand z-index attributes, the content is very detailed, interested friends can refer to, hope to be helpful to you.

1. Z-index seven-level stacked order table

1. Size comparison of cascading order:

Background/border

< 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依赖z-index的层叠上下文< 正z-index。 2.层叠顺序级别高的元素覆盖级别低的元素。 二、z-index与创建层叠上下文 1.首先要注意，z-index:auto 虽然可以看作z-index:0 ，但是这仅仅是在层叠顺序的比较上；从层叠上下文上讲，二者有本质差别：auto 不会创建层叠上下文，z-index:0 会创建层叠上下文。 注意有一种特殊情况，那就是IE7下，auto也会创建层叠上下文，不符合标准。 2.z-index层叠顺序的比较止步于父级层叠上下文 控制视图时，如果父级元素没有层叠上下文，则会一直找到根元素作为层叠上下文 3.z-index:数字 + 元素属性 配合得到层叠上下文 ①position:absolute/relative以及FireFox/IE下的position:fixed; 当z-index的值为auto时，元素还是普通元素，当z-index的值为具体数字时，就会创建层叠上下文 ②z-index值不为auto的flex项（display:flex/inline-flex;） 层叠上下文元素是flex子元素，而不是flex容器元素 4.不需要与z-index:数字 配合就可以创建层叠上下文的属性 ①元素的opacity值不为1； ②元素的transform值不为none； ③元素mix-blend-mode（混合模式）值不为normal； ④元素的filter（css3里的滤镜，不是指IE6/7/8/9里私有的那个滤镜）值不为none； ⑤元素的isolation（隔离）值是isolate（元素是孤立的） isolation:isolate这个声明是mix-blend-mode应运而生的。 默认情况下，mix-blend-mode会混合z轴所有层叠在下面的元素，如果我们不希望某个层叠的元素参与混合就可以使用isolation:isolate。 ⑥position：fixed声明，部分浏览器（FireFox/IE）需要z-index:数字 配合 ⑦will-change指定的属性值为上面任意一个 will-change的作用：增强页面渲染性能，即准备GPU（图形处理器）让浏览器加速渲染的 什么是GPU（图形处理器）？GPU是与处理和绘制图形相关的硬件。 GPU是专为执行复杂的数学和几何计算而设计的，可以让CPU从图形处理的任务中解放出来，从而执行其他更多的系统任务，例如，页面的计算与重绘。 当我们通过某些行为（点击、移动或滚动）触发页面进行大面积绘制的时候，浏览器往往是没有准备的，只能被动使用CPU去计算与重绘，由于没有事先准备，应付渲染够呛，于是掉帧，于是卡顿。而will-change则是真正的行为触发之前告诉浏览器，提前预约从容不迫；突然造访手忙脚乱。 ⑧元素的-webkit-overflow-scrolling设为touch（移动端特有的原生的滚动） 5.不支持z-index层叠上下文元素的层叠顺序均是z-index:auto; 6.为何定位元素会覆盖普通元素？ 例如当图片使用了position：relative；此时图片z-index：auto；这时图片的的层叠顺序 >

Inline elements (ordinary picture text is inline elements, cascading order is inline/inline-block), so it will be overridden.

III. Some principles to be paid attention to in the practice of z-index

1. Principle of minimizing influence

Objective: to avoid the confusion of z-index nesting cascading relationship

Reason: the cascading level of ① elements is mainly determined by the cascading context

② IE7 zhouse indexauto; will also create a new cascading context

Practice: ① avoids using positioning attributes

② positioning properties are separated from large containers to private small containers (relative course)

two。 The second rule of not committing a crime

Objective: to avoid z-index confusion and the style problem that one mountain is higher than the other.

Reason: multi-person collaboration and post-maintenance

Practice: for non-floating elements, avoid setting the z-index value. There is no reason for z-index to exceed 2.

(floating layer elements: such as bounce boxes, dragging around the page)

3. Component level counter

Objective: to avoid the problem of floating layer components covered by z-index.

Reason: ① always encounters unexpected high-level elements (such as other team intervention, or using other components on the web)

The override rules of ② components are dynamic (for example, a page has multiple pop-ups)

Practice: component-level counter method: obtain the maximum z-index value of child elements under body through js

For example, if the component defaults to m and the maximum body is n (n > m), then set the component to nroom1.

4. Accessibility concealment that is invisible to the human eye but recognized by auxiliary devices.

Z-index negative elements are above the background of the cascading context and below other elements

Practice: z-index:-1

Eg:html Code:

XML/HTML Code copies content to the clipboard

Submit

Css Code:

XML/HTML Code copies content to the clipboard

[type=submit] {position:absolute; zindexRose 1;}

On how to understand the z-index attributes to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.