Maquetación Web Dinámica / Posicionamiento y capas
Reto: la tarjeta con badge, imagen desbordada y tooltip
Reto40 min60 XP
El examen del módulo es una sola tarjeta de producto con TRES piezas flotantes — badge que muerde el borde, imagen que se sale del marco y tooltip que aparece al pasar el mouse. Parece poco; es el posicionamiento completo en 300×380 píxeles.
Reto
Tarjeta de producto con tres capas flotantes
Media35 min60 XP(×2 sin mirar la solución)
Qué debes construir
Una tarjeta de producto para unos audífonos ficticios:
<article class="tarjeta">
<span class="badge">-30%</span>
<div class="marco"><div class="producto">🎧</div></div>
<h3>Aura Pro</h3>
<p class="precio">$189 <s>$269</s></p>
<p class="desc">Cancelación activa de ruido
<span class="info">?<span class="tooltip" role="tooltip">Bloquea el ruido exterior analizándolo 500 veces por segundo</span></span>
</p>
<a class="cta" href="#">Agregar al carrito</a>
</article>body { font-family: system-ui; padding: 40px; background: #f1f5f9; display: grid; place-items: center; }
.tarjeta { position: relative; background: white; border-radius: 16px; padding: 76px 24px 24px; width: 280px; box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.1); }
.badge { position: absolute; top: -12px; left: 20px; z-index: 2; background: #b45309; color: white; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.marco { position: absolute; top: -34px; right: 20px; width: 110px; height: 110px; background: linear-gradient(135deg, #6d28d9, #4c1d95); border-radius: 20px; box-shadow: 0 12px 24px rgb(76 29 149 / 0.35); }
.producto { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; font-size: 52px; }
h3 { margin: 0 0 4px; font-size: 20px; color: #0f172a; }
.precio { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #0f172a; }
.precio s { font-size: 14px; font-weight: 400; color: #94a3b8; margin-left: 6px; }
.desc { margin: 0 0 16px; font-size: 13px; color: #475569; }
.info { position: relative; display: inline-block; width: 18px; height: 18px; background: #e2e8f0; color: #475569; border-radius: 50%; text-align: center; font-size: 12px; font-weight: 700; line-height: 18px; cursor: help; }
.tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 10; background: #0f172a; color: white; font-size: 12px; font-weight: 400; line-height: 1.4; padding: 8px 12px; border-radius: 8px; width: 190px; text-align: left; visibility: hidden; }
.info:hover .tooltip, .info:focus-within .tooltip { visibility: visible; }
.cta { display: block; background: #6d28d9; color: white; text-align: center; padding: 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14px; }Requisitos:
- El badge "-30%" muerde el borde superior (mitad afuera, mitad adentro) con offsets negativos.
- La imagen del producto (usa un emoji gigante o una imagen real) vive
en un marco con degradado que SE SALE de la tarjeta por arriba — y el
emoji va centrado en su marco con la técnica moderna (
inset: 0; margin: auto). - El tooltip: un circulito "?" junto a la descripción; al hacer hover (y al enfocar con teclado), aparece un globo ENCIMA, centrado respecto al "?", sin mover ni un píxel del layout.
- La tarjeta reserva espacio arriba (padding-top generoso) para que el marco desbordado no tape el título.
- z-index con escala consciente: badge encima del marco, tooltip encima de todo.
Reglas
- El flujo normal para lo normal (título, precio, botón): position SOLO para las tres piezas flotantes.
- El tooltip debe aparecer también con teclado (
:focus-withinademás de:hover) — accesibilidad no negociable. - Nada de librerías: el tooltip es CSS puro.
35:00
Cuando estés listo, arranca el reloj.
Qué sigue
Módulo 7 cerrado: con Grid, Flexbox y position dominas las TRES formas de poner cosas donde quieres. El módulo 8 las pone a prueba donde importa: el responsive design profesional — mobile-first, container queries y la landing completa de 5 secciones.