CSS14.元素层级

原创于 2020-02-14 14:22:48 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

html5 && css 专栏收录该内容

23 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">

            .box1{
                height: 300px;
                width: 300px;
                background-color: pink;
                position: relative;
            }
            .box2{
                height: 300px;
                width: 300px;
                background-color: yellowgreen;
                /* 开启绝对定位 */
                position: absolute;
                /* 设置偏移量 */
                top: 200px;
                left: 200px;
                /* 
                    通过z-index属性设置元素层级
                    可以为z-index: 制定一个整数作为值，表示元素层级

                        ps:父元素层级再高也不会盖住子元素

                    对于没有开启定位的元素不能用z-index
                 */
                 z-index: 3;
                /* 
                设置元素透明背景：
                    opacity：需要0-1之间的数值(IE8及以下不支持)

                    IE8及以下,透明度需要0-100的值
                    filter: alpha(opacity=50);
                */
             opacity: 0.5;
                
            }
            
            .box3{
                height: 300px;
                width: 300px;
                background-color: darkgray;
                position: relative;
            }
        /* 
            如果定位元素层级一样，则下面会盖住上面
         */
        </style>


    </head>
        
    <body>
        
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

    </body>


</html>