元素的层级
1.下面的盖住上面的元素
2.z-index大的盖住z-index小的
3.父元素的z-index再大也盖不住子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> </script> <style type="text/css"> .box2{ width: 200px; height: 200px; background-color: darkblue; /* 开启绝对定位 */ position: absolute; top: 100px; left: 100px; /* 如果定位元素的层级是一样，则下边的元素会盖住上边的 通过z-index属性可以用来设置元素的层级 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级 层级越高，越优先显示 对于没有开启定位的元素不能使用z-index */ z-index: 1;opacity:0.5; } .box3{ width: 200px; height: 200px; background-color: yellow; } .box1{ width: 200px; height: 200px; background-color: bisque; z-index: 2; } .box4{ width: 200px; height: 200px; background-color: aquamarine; position: relative; z-index: 20; /* 父元素的层级再高也不会盖住子元素 */ } .box5{ width: 100px; height: 100px; background-color: beige; position: absolute; z-index: 10; } </style> </head> <body style="height: 5000px;"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <!-- box1在box2上面且box1和box2层级一样，下边的元素会盖住上面的元素，所以box2会盖住box1 通过修改z-index来修改覆盖关系 --> <div class="box4"> <div class="box5"></div> </div> </body> </html>
设置元素的透明背景
opacity可以用来设置元素背景的透明
它需要一个0-1之间的值 0表示完全透明，1表示完全不透明 0.5半透明
opacity属性再IE8及以下不支持，可以用以下属性代替
filter:alpha(opacity=透明度;)
透明度 需要一个0~100之间的值