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>