Cargando...

Position en CSS

Las lecciones de flujo enseñaron a las cajas cómo unirse a una línea. position responde otra pregunta: ¿dónde se sienta esta caja respecto a su lugar normal, a un ancestro o a la pantalla? Domina los cinco valores cotidianos antes de apilar o usar trucos con float.

Una caja de herramientas de position

📊 Position de un vistazo

Valor	Trabajo cotidiano
`static`	Predeterminado — offsets como top/left casi no sirven
`relative`	Se desplaza de su sitio normal; conserva su espacio; puede anclar hijos absolute
`absolute`	Sale del flujo normal; se coloca respecto al ancestro posicionado más cercano
`fixed`	Sale del flujo; se fija al viewport mientras haces scroll
`sticky`	Actúa como relative hasta un umbral de scroll, luego se pega dentro de su contenedor

Los offsets top, right, bottom y left solo importan cuando position no es static. Elige primero el modo y luego afina el offset.

Relative — un empujón educado

relative mantiene el elemento en el flujo. El espacio original sigue reservado. Los offsets pequeños sirven para ajustes ópticos — y para marcar un padre al que deben obedecer los hijos absolute.

Empujón relative

css

.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — salir del flujo

absolute saca la caja del flujo normal. Los vecinos cierran el hueco. La colocación usa el ancestro más cercano con position distinto de static — a menudo un padre relative. Sin ese ancla, el elemento puede subir a un bloque contenedor mayor.

Insignia absolute

css

.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

Dale un hogar a absolute

Empareja hijos absolute con un padre intencional. Nombra la relación con clases para que el layout se lea con claridad.

Padre posicionado

css

.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — pegado al viewport

fixed fija el elemento a la pantalla. El scroll de la página no lo mueve. Úsalo para avisos serenos o barras de herramientas — no como atajo para cada layout de columnas.

Aviso fixed

css

.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — relative y luego pegado

sticky permanece en el flujo hasta que superas un umbral de scroll (top es habitual), luego se pega dentro de su ancestro con scroll. Necesita espacio para desplazarse y un padre sensato — si no, parece roto.

Etiqueta de sección sticky

css

.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

Un hábito sereno de position

Usa relative para empujones pequeños y anclas absolute. Usa absolute para insignias y superposiciones dentro de un padre conocido. Reserva fixed y sticky para chrome intencional. Deja el stacking con z-index y la limpieza de float para sus propias lecciones.

Roles de position con nombre

css

.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

Pruébalo tú

Empuja una .card con position: relative y valores pequeños de top / left.
Coloca un .badge con absolute dentro de un padre .media relative.
Añade un aviso pequeño fixed en una esquina — haz scroll y míralo quedarse.
Prueba una etiqueta sticky con top: 0 en una sección alta con scroll.
Escribe una frase: ¿cuándo es absolute más seguro que fixed?

Errores frecuentes

Usar absolute sin padre posicionado y preguntarse por qué salta lejos
Recurrir a fixed para resolver el layout normal de la página
Esperar que sticky funcione sin overflow de scroll o con ancestros conflictivos
Tratar esta lección como la de filas inline-block (otro trabajo)
Volcar aquí recetas de z-index o float en lugar de aprender modos de colocación

Resumen

position controla la colocación respecto al flujo, ancestros o viewport
relative empuja y ancla; absolute sale del flujo dentro de ese ancla
fixed se fija al viewport; sticky mezcla comportamiento relative y pegado
Los offsets importan solo cuando position no es static
Deja stacking y float para después — domina primero los cinco modos

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma