0
177
VistasCSS 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:
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta