Ejercicio: Posicionamiento y capas

Objetivo

Posicionar una barra pegajosa, una insignia, un botón de cierre y un modal centrado sobre una capa que cubre la pantalla.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

<header class="barra">
  <strong>Mi sitio</strong>
  <a href="#">Inicio</a>
</header>
<main class="contenido">
  <article class="producto">
    <span class="insignia">Nuevo</span>
    <div class="imagen"></div>
    <h2>Lámpara de mesa</h2>
    <button class="cerrar" aria-label="Cerrar">✕</button>
  </article>
  <p class="relleno">Contenido largo para poder desplazar la página. Contenido largo para poder desplazar la página.</p>
  <p class="relleno">Más contenido para poder desplazar la página. Más contenido para poder desplazar la página.</p>
</main>
<div class="fondo-modal"><div class="modal">Hola, soy un modal</div></div>

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Escribe *, *::before, *::after { box-sizing: border-box; } y body { margin: 0; font-family: system-ui, sans-serif; }.
• Haz que .barra se quede pegada arriba al desplazar (position: sticky; top: 0) con fondo #4f46e5, texto blanco, padding: 12px 16px y z-index: 10.
• Haz que .producto sea la referencia (position: relative) con borde 1px solid #dde2ef, padding: 16px y max-width: 280px.
• Coloca .insignia en la esquina superior derecha de .producto, a 12px de cada borde, con fondo #e11d48 y texto blanco.
• Coloca .cerrar en la esquina superior izquierda del producto (top: 8px; left: 8px).
• Haz que .fondo-modal cubra toda la ventana (position: fixed; inset: 0), con fondo rgba(15, 18, 34, .6) y z-index: 100, y centra el .modal con display: grid; place-items: center.
• Da al .modal fondo blanco, padding: 24px y border-radius: 16px.

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #4f46e5;
  color: #fff;
  padding: 12px 16px;
}
.barra a { color: #fff; }

.producto {
  position: relative;
  max-width: 280px;
  padding: 16px;
  border: 1px solid #dde2ef;
}

.insignia {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e11d48;
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
}

.cerrar { position: absolute; top: 8px; left: 8px; }

.fondo-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 34, .6);
  z-index: 100;
  display: grid;
  place-items: center;
}

.modal {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
}