认识CSS中的z-index元素层级属性_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了认识CSS中的z-index元素层级属性_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2082字，纯文字阅读大概需要3分钟。

内容图文

z-index的使用：

1、如果定位元素不发生嵌套，即是同级元素 ，则遵循“后来居上”和“大小”原则；

2、如果发生嵌套，则遵循“祖先优先”原则，由父级元素的z-index决定，前提是父级元素的z-index值为数值，此时会忽略子代元素的z-index值；

css中的层叠上下文和层级水平：层叠上下文简单的说就是一个包含了一组堆叠层的元素，它们在Z轴上有着特定的顺序，页面根元素和由z-index为数值的定位元素具有层叠上下文；

层级水平：它决定了同一个层叠上下文中的元素在Z轴上的显示顺序，和z-index并不同；

层叠上下文的特点：可以嵌套，组成分层次的层叠上下文；每个层叠上下文和兄弟元素独立，当进行层叠变化时，只影响子元素；

著名的7阶层叠水平：

小解答：1、为什么inline/liline-block的层级水平大于float的层级水平？

因为行内元素一般承载的是内容，为了符合页面加载的美观，所以行内元素会覆盖浮动元素；

2、为什么定位元素会覆盖普通元素？

因为定位元素z-index:0;而普通元素为行内元素或浮动元素，根据7阶层叠水平表，普通元素和浮动元素都会被覆盖；

3:z-index:0为什么不等于z-index:auto?

因为z-index:0;会创建层叠上下文，而z-index:auto；不会，但他们在层叠顺序上是一样的；

其他CSS属性影响层叠上下文的层叠顺序：

1、z-index的值不为auto的flex项；

2、元素的opacity不是1；

3、元素的transform不是none;

4、元素的mix-blend-mode的值不是normal;

5、元素的filter值不是none;

6、元素的position:fixed声明；

7、移动端的webkit-overflow-scrolling设为otuch;

8、will-change指定的属性中的任何一个；

使用z-index需要注意的问题：

1、最小化原则;为了避免z-index嵌套层叠关系混乱，尽量避免使用定位属性；

2、“不超2”原则：非浮层元素，避免设置z-index值超过2，一般在0,1,2；可以通过调节DOM节点的书序来说实现；

3、浮层组件计数器：为了避免浮层组件被z-index值高 的元素覆盖，通过JS获取body下子元素层级最高数，将浮层的z-index值设为+1；

4：可访问性隐藏：z-index:-1;

参考：http://www.zhangxinxu.com/wordpress/?p=5115

内容总结

以上是互联网集市为您收集整理的认识CSS中的z-index元素层级属性_html/css_WEB-ITnose全部内容，希望文章能够帮你解决认识CSS中的z-index元素层级属性_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端