z-index con overflow:hidden - solución completa

El problema: Tienes un elemento posicionado que aparece cortado o simplemente no se muestra. Revisas todo y tienes el z-index correcto. El culprit? overflow: hidden.

¿Por qué overflow:hidden corta elementos?

Cuando aplicas overflow: hidden a un contenedor, acts como una barrera que recorta todo lo que sale de sus límites, incluyendo elementos posicionados.

/* Este contenedor corta elementos posicionados */
.card-container {
  overflow: hidden;
}

/* El badge aparece cortado */
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
}

Las soluciones

Solución 1: Usa overflow: visible (La más simple)

/* ❌ Oculta el badge */
.card {
  overflow: hidden;
}

/* ✅ Permite que el badge se vea */
.card {
  overflow: visible;
}

Solución 2: Remueve overflow del padre

<!-- ❌ El padre tiene overflow:hidden -->
<div class="card" style="overflow: hidden">
  <div class="badge">Nuevo</div>
</div>

<!-- ✅ Sin overflow problemático -->
<div class="card">
  <div class="badge">Nuevo</div>
</div>

Solución 3: Expande el contenedor

Si necesitas overflow: hidden por diseño:

.card {
  overflow: hidden;
  /* Expandir para dejar espacio al elemento posicionado */
  padding: 10px;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  /* Ahora tiene espacio para mostrarse */
}

Solución 4: Mueve el elemento fuera del contenedor

<!-- ❌ Dentro del contenedor cortado -->
<div class="card" style="overflow: hidden">
  <img src="producto.jpg" />
  <span class="badge">Oferta</span>
</div>

<!-- ✅ El badge fuera -->
<div class="card-wrapper" style="position: relative">
  <div class="card" style="overflow: hidden">
    <img src="producto.jpg" />
  </div>
  <span class="badge">Oferta</span>
</div>

Solución 5: Usa CSS Grid/Flexbox con cuidado

/* ❌ overflow:hidden en flex container */
.flex-container {
  display: flex;
  overflow: hidden;
}

/* ✅ overflow: visible en items */
.flex-item {
  overflow: visible;
}

Ejemplo completo: Tarjeta con badge

.producto-card {
  position: relative;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden; /* Recorta contenido que sale */
}

.producto-card:hover {
  overflow: visible; /* Expande al hacer hover */
}

.producto-imagen {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.badge-oferta {
  position: absolute;
  top: 10px;
  right: -20px; /* Sale del contenedor */
  background: red;
  color: white;
  padding: 5px 30px;
  transform: rotate(45deg);
}

/* Solución: Quitar overflow o expandir */
.producto-card {
  overflow: visible; /* Permite ver el badge */
}

Tabla de soluciones según el caso

CasoSolución
Badge en esquinaoverflow: visible
Tooltip en inputMover tooltip fuera del padre
Dropdown en navbaroverflow: visible en el item
Popup en modalPortal renderizado en body

Errores comunes

❌ Pensar que z-index lo arreglará

/* No funciona si el padre tiene overflow:hidden */
.badge {
  position: absolute;
  z-index: 9999; /* Ignorado */
}

❌ Aplicar overflow:hidden a todo

/* ❌ Too much clipping */
* {
  overflow: hidden;
}

/* ✅ Solo cuando sea necesario */
.card {
  overflow: hidden;
}

Checklist

  • ¿El padre tiene overflow: hidden?
  • ¿Puedes usar overflow: visible?
  • ¿Puedes mover el elemento fuera del padre?
  • ¿Expandir el padding del padre ayuda?

Artículos relacionados

: overflow:hidden es útil pero puede ser cruel. Dale a tus elementos el espacio que necesitan.