首页 > 代码库 > z-index 层级关系

z-index 层级关系

2024-09-15 06:09:50   218人阅读

 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 层级关系


联系
我们