CSS Div overlaps text Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of CSS Div overlaps text without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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 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;
    }

current status

Answer

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

   <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>
We are here to answer your question about CSS Div overlaps text - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji