实现几个div部分叠加在一起，当鼠标悬停在某个div时，那个div就在显示在最上层？

最新推荐文章于 2024-03-05 14:34:05 发布

老张谋

最新推荐文章于 2024-03-05 14:34:05 发布

阅读量2k

点赞数 3

分类专栏：前端技术文章标签： html

本文链接：https://blog.csdn.net/wgf5845201314/article/details/89445798

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏



<!doctype html><html> 
<head>
     <meta charset="UTF-8">
 <style>
 html, body{
     margin: 0px; width: 100vw; height: 100vh; 
     font-family: Arial, Helvetica, sans-serif;
     }
div.container{
         width: 100%; 
         height: 100%; 
         background-color: #efefef;
          position: relative;
          }
div.blk{
        width: 150px;
        height: 150px;
        background-color: white; 
        border: 1px solid #ccc; 
        border-radius: 2px; 
        box-shadow: 0px 0px 4px #999; 
        cursor: pointer; 
        line-height: 150px; 
        text-align: center; 
        font-size: 3rem; 
        z-index: 0; 
        position: absolute;
        }
    div.blk:hover{
            box-shadow: 0px 0px 10px #ccc; 
            z-index: 100000;
        }
    .one{
        top: 100px; 
        left: 100px;
    }
    .two{
        top: 150px; 
        left: 150px;
    }
                
       .three{
           top: 200px; 
           left: 200px;
           }
        .four{
            top: 250px; 
            left: 250px;
            }
    </style> 
    </head> 
<body> 
        <div class="container"> 
            <div class="blk one">A</div>
            <div class="blk two">B</div>
            <div class="blk three">C</div>
            <div class="blk four">D</div>
        </div>
</body>
       
</html>