CSS Position
La propiedad position define cómo se ubica un elemento en el flujo del documento. Es una de las herramientas más importantes para afinar el layout y el diseño.
Valores de position
CSS position puede tomar distintos valores, cada uno con un comportamiento diferente en el diseño.
| Valor | Descripción |
|---|---|
| static | Valor predeterminado. El elemento se coloca en el flujo normal del documento. |
| relative | El elemento se desplaza respecto a su posición normal usando top, left, right, bottom. |
| absolute | El elemento se posiciona en relación al primer contenedor que no sea estático. |
| fixed | El elemento se fija en relación a la ventana del navegador y no se mueve al hacer scroll. |
| sticky | El elemento permanece fijo durante el scroll hasta cierto punto, luego vuelve al flujo normal. |
Posicionamiento absoluto
El posicionamiento absoluto permite definir con precisión dónde debe ubicarse un elemento dentro de su contenedor padre.
En el ejemplo, la caja roja está ubicada en la esquina superior derecha de la caja gris contenedora.
Posición sticky
La posición sticky es útil en barras de navegación, ya que mantiene el elemento en la parte superior al hacer scroll, luego vuelve al flujo normal.
Consejos para usar position
El uso correcto de position es esencial para crear layouts precisos y responsivos.
- Siempre asigna position: relative al padre si quieres posicionar un hijo con absolute.
- Usa fixed con cuidado, ya que puede tapar contenido al hacer scroll.
- Sticky es especialmente útil para barras de navegación y cabeceras.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.