z-index.html - 爱码网

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .bigbox{
 8                 width: 500px;
 9                 height: 500px;
10                 background-color: #333;
11                 position: relative;
12                 z-index: 5;
13             }
14             .one{
15                 width: 200px;
16                 height: 200px;
17                 /*background-color: #FFC0CB;*/
18                 position: absolute;
19                 left: 200px;
20                 top: 0;
21                 z-index: 1;
22                 color: #fff;
23             }
24             .two{
25                 width: 200px;
26                 height: 200px;
27                 background-color: rgba(0,0,0,.3);
28                 position:absolute;
29                 left: 200px;
30                 top: 1;
31                 display: none;
32             }
33             .bigbox:hover .two{
34                 display: block;
35             }
36         </style>
37     </head>
38     <body>
39         <div class="bigbox">
40             <div class="one">
41                 我是一个在最上面的元素
42             </div>
43             <div class="two"></div>
44         </div>
45     </body>
46 </html>