CSS Div overlaps text-CodePudding

I`m releasing a new feature on my website and I want to mark the new a-tag in the navbar with a "NEW" sign top right of the a-tag (little overlapping). But i dont know how to make this overlapping happen and that my span with "NEW" (the text) is showen in full width. Difficult to discribe for me, current status in the picture. I tried z-index, didnt work. Here is my code. Thank you so much in advance.
navbar html and css:

<li >
      <a  routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span >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;
    }

current status

CodePudding user response：

try give relative position to <a> or <li> and absolute position to <span>, than z-index will be working

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

CodePudding user response：

Give position:absolute to .new-feature and position:relative to its parent class. You can play with values to fit to your need.

*{
    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 >
            <a  routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span >NEW</span></a>
        </li>