body {background-color: #c3c3c3}

Z-index用法总结

  z-index  在w3cschool介绍 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute，relative，fixed）！

 

 

Z-index 只对 定位元素才有效

z-index先比较父级先，父级优先 .如果要想概改变每个元素的层级，可以先把其设置为 定位元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     ul{background-color: red;margin: 0 auto;border: 1px solid black;width: 490px;padding: 0}
 8 li{margin: 0;padding: 0;}
 9 li{list-style: none; width: 80px;height: 30px;line-height: 30px;text-align: center; background-color: white; margin-right: 2px; position: relative;overflow: hidden;float: left;}
10 span{z-index: 2 ;position: relative;}
11 ul::after{    content: "";    clear: both;    display: block;}
12 div{ width: 80px;height: 30px;background-color: #f40;position: absolute;
13     opacity: 0.3;top: -30px; z-index: 1;transition: top 0.2s; }
14 li:hover div {
15     top: 0px;
16 }
17 #last{
18     margin-right: -2px;
19 }
20 
21 </style>
22 </head>
23 <body>
24     <ul>
25 
26     <li>
27         <span>测试</span>
28 
29          <div></div>
30 
31 
32 
33     </li>
34 
35 
36 
37     <li>
38         <span>测试</span>
39 
40          <div></div>
41 
42 
43 
44     </li><li>
45         <span>测试</span>
46 
47          <div></div>
48 
49 
50 
51     </li><li>
52         <span>测试</span>
53 
54          <div></div>
55 
56 
57 
58     </li><li>
59         <span>测试</span>
60 
61          <div></div>
62 
63 
64 
65     </li ><li id="last">
66         <span>010试</span>
67 
68          <div></div>
69 
70 
71 
72     </li>
73 
74 
75 </ul>
76 </body>
77 </html>

 



posted @ 2018-09-07 13:45  最美胡萝卜  阅读(422)  评论(0)    收藏  举报
body {background-color: #c3c3c3}