元素的层级
1.下面的盖住上面的元素
2.z-index大的盖住z-index小的
3.父元素的z-index再大也盖不住子元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 </script> 8 <style type="text/css"> 9 10 .box2{ 11 width: 200px; 12 height: 200px; 13 background-color: darkblue; 14 /* 开启绝对定位 */ 15 position: absolute; 16 top: 100px; 17 left: 100px; 18 /* 如果定位元素的层级是一样，则下边的元素会盖住上边的 19 通过z-index属性可以用来设置元素的层级 20 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级 21 层级越高，越优先显示 22 对于没有开启定位的元素不能使用z-index 23 */ 24 z-index: 1;opacity:0.5; 25 } 26 .box3{ 27 width: 200px; 28 height: 200px; 29 background-color: yellow; 30 31 } 32 .box1{ 33 width: 200px; 34 height: 200px; 35 background-color: bisque; 36 z-index: 2; 37 } 38 .box4{ 39 width: 200px; 40 height: 200px; 41 background-color: aquamarine; 42 position: relative; 43 z-index: 20; 44 /* 45 父元素的层级再高也不会盖住子元素 46 */ 47 } 48 .box5{ 49 width: 100px; 50 height: 100px; 51 background-color: beige; 52 position: absolute; 53 z-index: 10; 54 } 55 </style> 56 </head> 57 <body style="height: 5000px;"> 58 <div class="box1"></div> 59 <div class="box2"></div> 60 <div class="box3"></div> 61 <!-- box1在box2上面且box1和box2层级一样，下边的元素会盖住上面的元素，所以box2会盖住box1 62 通过修改z-index来修改覆盖关系 63 --> 64 <div class="box4"> 65 <div class="box5"></div> 66 </div> 67 </body> 68 </html>
设置元素的透明背景
opacity可以用来设置元素背景的透明
它需要一个0-1之间的值 0表示完全透明，1表示完全不透明 0.5半透明
opacity属性再IE8及以下不支持，可以用以下属性代替
filter:alpha(opacity=透明度;)
透明度 需要一个0~100之间的值
