0
178
VistasCSS Div superpone texto
Estoy lanzando una nueva función en mi sitio web y quiero marcar la nueva etiqueta a en la barra de navegación con un signo "NUEVO" en la parte superior derecha de la etiqueta a (un poco superpuesta). Pero no sé cómo hacer que suceda esta superposición y que mi lapso con "NUEVO" (el texto) se muestre en ancho completo. Difícil de describir para mí, el estado actual está en la imagen. Probé z-index, no funcionó. Aquí está mi código.
barra de navegación html y 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; }Actualmente se ve así:
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
intente dar la posición relativa a <a> o <li> y la posición absoluta a <span> , entonces el índice z estará funcionando
<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
Dar position:absolute a .new-feature y position:relative a su clase padre. Puedes jugar con los valores para que se ajusten a tu necesidad.
*{ 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