父子层级对z-index属性的影响

本文转载自查看原文 2017-11-08 10:15 2830 父子层级对z-index的影响/ z-index失效

　　z-index用来改变元素的层级关系。使用z-index首先需要设置position属性，可以是relative、absolute、fixed，只有当元素发生重叠是z-index的效果才会显现出来；但是，仅仅设置了position、z-index及其位置属性并不一定会达到想要的效果。

例如：

 1 <body link="#0000cc" style="">
 2 　　<div style="
 3     　　position: relative;
 4     　　width: 400px;
 5     　　height: 200px;
 6     　　background-color: red;
 7     　　z-index: 1;
 8 　　">
 9     　　<div style="
10     　　　　position: fixed;
11     　　　　width: 200px;
12     　　　　height: 148px;
13     　　　　background-color: yellow;
14     　　　　z-index: 99;
15 　　　　"></div>
16 　　</div>
17 　　<div style="
18     　　position: fixed;
19     　　width: 300px;
20     　　height: 300px;
21     　　background-color: blue;
22     　　left: 50px;
23     　　top: 50px;
24     　　z-index: 10;
25 　　"></div>
26 </body>

显示效果为：

问题：

　　按照我设置的z-index，应该是黄色在蓝色的上面。但是现在虽然蓝色div的z-index值小于黄色z-index的值，但是他却显示在了黄色的上面；

原因：

　　1、黄色div的父DOM节点的z-index值小于蓝色div的z-index值，而作为子DOM的黄色节点是在红色div的z-index基础上进行显示的；

　　2、红色div和蓝色div是同级的；

修改方案：

　　修改红色div的z-index值，让他大于蓝色div的z-index值，或者让红色z-index值失效（不使用relative，使用static）；我使用第二种方式来解决；

修改代码为：

 1   <body link="#0000cc" style="">
 2   　　<div style="
 3      　　 position: relative;
 4       　　width: 400px;
 5       　　height: 200px;
 6      　　 background-color: red;
 7       　　z-index: 1;
 8   　　">
 9       　　<div style="
10      　　　　position: fixed;
11      　　　　width: 200px;
12      　　　　height: 148px;
13      　　　　background-color: yellow;
14      　　　　z-index: 99;
15  　　　　"></div>
16  　　</div>
17 　　<div style="
18      　　position: fixed;
19      　　width: 300px;
20     　　height: 300px;
21     　　background-color: blue;
22      　　left: 50px;
23      　　top: 50px;
24      　　z-index: 10;
25  　　"></div>
26  </body>

最终显示效果为：

OK！问题解决(^_^)

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css中的层级问题（z-index） z-index基本用法 z-index属性解决样式被遮挡的问题 CSS z-index属性层重叠顺序 position为fixed时设置z-index失效，层级定位失败 uniapp-image标签显示层级始终最高问题（z-index不好用）深入理解css中position属性及z-index属性深入理解css中position属性及z-index属性深入理解css中position属性及z-index属性 ios系统设置-webkit-overflow-scrolling: touch导致z-index 失效（弹窗层级设置无效）- 替代方案