元素的层级

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之间的值