CODEWITHSUNDEEP
javascripthtmlcssoverlapping
julianff1
julianff1

Reputation: 7

CSS Div overlaps text

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 don't know how to make this overlapping happen and that my span with "NEW" (the text) is shown in full-width. Difficult to describe for me, current status is in the picture. I tried z-index, didn't work. Here is my code.

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

It currently looks like this:

current status

Upvotes: 0

Views: 74

Answers (2)

mirec
mirec

Reputation: 86

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>

Upvotes: 1

Ash
Ash

Reputation: 473

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

Upvotes: 0

Related Questions