父子層級對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刪除。

猜您在找 關於z-index這個層級的問題關於z-index 屬性和層級覆蓋的相關學習 CSS層級關系--z-index css z-index的層級關系 css中的層級問題（z-index） z-index屬性詳解深入剖析z-index屬性解決z-index 在 ios中層級定位無效方法 z-index基本用法 z-index詳解