z-index 层级关系

Posted kbeer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了z-index 层级关系相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7        /* .test {
 8             width: 150px;
 9             height: 300px;
10             border: 1px solid #ccc;
11             margin-top: 100px;
12             float: left;
13             margin-left: -1px;
14         }
15         .test:hover {
16             border: 1px solid #f40;
17             position: relative;
18         } */
19         .test {
20             width: 150px;
21             height: 300px;
22             border: 1px solid #ccc;
23             margin-top: 100px;
24             float: left;
25             margin-left: -1px;
26             position: relative;
27         }
28         .test:hover {
29             border: 1px solid #f40;
30             z-index: 1;
31 
32         }
33     </style>
34 </head>
35 <body>
36 <div class="test"></div>
37 <div class="test"></div>
38 <div class="test"></div>
39 <div class="test"></div>
40 <div class="test"></div>
41 </body>
42 </html>

 

以上是关于z-index 层级关系的主要内容,如果未能解决你的问题,请参考以下文章

在div+css中如何让两个元素的层级关系改变,z-index,不是很好使……

z-index用法总结

__x__(35)0908第五天__ 层级 z-index

position五种属性

z-index

DOM层级顺序与z-index