CSS Div 重叠文本

Question

我要在我的网站上发布一项新功能，我想在导航栏中用 a-tag 右上角的“NEW”标志标记新的 a-tag（很少重叠）。但我不知道如何使这种重叠发生，并且我的“NEW”（文本）跨度以全角显示。对我来说很难描述，目前的状态在图片中。我试过 z-index，没用。这是我的代码。

导航栏html和css:

<li class="nav-item p-1">
      <a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span class="new-feature">NEW</span></a>
    </li>
    
    .new-feature{
      width: 50px;
      height: 20px;
     background: linear-gradient(135deg, #9932cc, #fa490a);
      color: #fff;
      font-size: 15px;
      border-radius: 15px;
      text-align: center;
    }

目前看起来是这样的：

Answer 1

尝试给 <a> 或 <li> 提供相对位置，给 <span> 提供绝对位置，这样 z-index 就可以工作了

   <li class="nav-item p-1" style="position:relative;">
    <a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases
     <span class="new-feature" style="position:absolute;top:0;left:0;">NEW</span>
    </a>
   </li>

Answer 2

将 position:absolute 交给 .new-feature，将 position:relative 交给父级 class。您可以使用适合您需要的值。

*{
    margin:0px;
    padding: 0px;
}
.nav-item{
    list-style: none;
    padding: 10px;
}

.new-feature-wrapper{
    position: relative;
}
.new-feature{
    position: absolute;
    width: 30px;
    height: 10px;
   background: linear-gradient(135deg, #9932cc, #fa490a);
    color: #fff;
    font-size: 12px;
    border-radius: 15px;
    text-align: center;
    padding: 5px;
    top: 2px;
}

<li class="nav-item p-1 new-feature-wrapper">
            <a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span class="new-feature">NEW</span></a>
        </li>

CSS Div 重叠文本

CSS Div overlaps text

javascript

html

css

overlapping