z-index使用无效的解决办法

不爱吃糖的程序媛

发布于 2024-01-18 21:08:07

730

发布于 2024-01-18 21:08:07

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

重点：z-index要配合position一起用，否则无效;

效果图：

源代码：

<div class="warehouse-item-header">
    <div class="background-icon">
       <Icon
         class="icon-notice-copy"
         link="icon-cangkukapianbeijing-copy"
         customStyle="width:86px;height:86px;"
       ></Icon>
     </div>
</div>     

.warehouse-item-header {
   height: 54px;
     line-height: 54px;
     font-size: 14px;
     font-weight: 400;
     padding: 0 16px;
     position: relative;

     .background-icon {
       position: absolute;
       top: 0;
       left: 0;
       width: 72px;
       height: 72px;
       z-index: 1;
       overflow: hidden;
       .svg-div {
         margin-left: -14px;
         margin-top: -14px;
       }
     }

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

header