Posicionamiento

🎯 Objetivo

Posicionar elementos con static, relative, absolute, fixed, sticky.

⚔️ Implementación

/* STATIC (default) */
.normal { position: static; }

/* RELATIVE (relativo a posición original) */
.desplazado {
  position: relative;
  top: 10px;    /* 10px abajo */
  left: 20px;   /* 20px derecha */
}

/* ABSOLUTE (relativo al padre positioned) */
.contenedor {
  position: relative; /* Contexto para hijos absolute */
}
.hijo {
  position: absolute;
  top: 0;
  right: 0; /* Esquina superior derecha del padre */
}

/* FIXED (relativo al viewport - siempre visible) */
.header-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* STICKY (híbrido) */
.menu-sticky {
  position: sticky;
  top: 0; /* Se pega al hacer scroll */
}

/* Z-INDEX (capas) */
.atras { z-index: 1; }
.medio { z-index: 10; }
.frente { z-index: 100; }

🎯 Reto Ninja

MISIÓN DE ESTRATEGIA

📍 El Arte de la Ubicación

1

Crea un contenedor con position: relative que ocupe gran parte de la pantalla.

2

Coloca un "logo" (puedes usar un emoji en un <span>) con position: absolute en la esquina superior derecha.

3

Diseña una barra de navegación que sea position: sticky y se quede pegada al techo al hacer scroll.

4

Añade un botón de "Volver arriba" con position: fixed en la esquina inferior derecha.

Consejo del Sensei: No abuses de absolute. Úsalo solo para detalles específicos dentro de contenedores relative para no romper el flujo natural.

✅ Checklist de Dominio

POSICIONAMIENTO DOMINADO

Pergamino de Ubicación