CSS Div 与文本重叠答案

【问题标题】：CSS Div overlaps textCSS Div 与文本重叠
【发布时间】：2022-02-12 22:09:09
【问题描述】：

我在我的网站上发布了一项新功能，我想在导航栏中使用 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;
    }

目前看起来是这样的：

【问题讨论】：

标签： javascript html css overlapping

【解决方案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>

【讨论】：

好的，非常感谢！我做了定位，然后调整了顶部和左侧。

【解决方案2】：

将position:absolute 给.new-feature 和position:relative 给它的父类。您可以使用适合您需要的值。

*{
    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>

【讨论】：