HTML：z-index

owerm

已于 2024-05-09 13:59:48 修改

阅读量197

点赞数 2

文章标签： html 前端

于 2024-05-09 13:45:23 首次发布

本文链接：https://blog.csdn.net/owerm/article/details/138609354

版权

1、只对position属性有效果，但static值没有效果；

2、有层级关系，子元素顺序再大也不会超过父元素；

3、z-index的值允许负整数 0 正整数。

4、其他属性会对z-index使用效果有影响，如：opacity透明度等

5、用途广泛如应用如下拉菜单、导航栏、弹出层、模态窗口、简单动画效果等等。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    .box{
        width:500px;
        height: 500px;
        background: #134;
        overflow:hidden;
        position: relative;
    }  
  
    
    #w1,#w2,#w3{
/*        width: 500px;height: 500px;*/
        position:absolute;
        position: 
       }

    
    img{background-size: cover;
        position: absolute;
        width: 500px;height: 500px;
        }
    
    .d1{z-index: 3}
    .d2{z-index:2}
    .d3{z-index: 1}
    
/*    电脑*/
    .img1{ z-index: 2 }
    .img1-1{ z-index: 3 }
    .img1-2{ z-index: 1 }
/*家具*/
    .img2{ z-index: 1 }
    .img2-1{ z-index: 2 }
    .img2-2{ z-index: 3 }
/*    定位*/
    .img3{ z-index: 1 }
    .img3-1{ z-index: 2 }
    .img3-2{ z-index: 3 }
</style>
<body>
    <div class="box">
        
        <div id="w1" class="d1" >
            <img class="img1" src="images/城市.png" alt="1">
            <img class="img1-1" src="images/电脑1.png" alt="1">
            <img class="img1-2" src="images/书.png" alt="1">            
        </div>
        
        <div id="w2" class="d2" >
            <img class="img2" src="images/家具/bj01.jpg" alt="2">
            <img class="img2-1" src="images/家具/bj02.jpg" alt="2">
            <img class="img2-2" src="images/家具/bj03.jpg" alt="2">
        </div>
        
        <div id="w3" class="d3" >
            <img class="img3" src="images/定位/banner_1.jpg" alt="3">
            <img class="img3-1" src="images/定位/banner_2.jpg" alt="3">
            <img class="img3-2" src="images/定位/banner_3.jpg" alt="3">
        </div>

    </div>
</body>
</html>

效果