DEV Community

Cover image for Guía completa y práctica sobre posicionamiento CSS: Fundamentos
Lupita Code 🌄
Lupita Code 🌄

Posted on

Guía completa y práctica sobre posicionamiento CSS: Fundamentos

¡Hola, gente bonita! 👋

Antes de explicar los diferentes valores que tiene la propiedad position debemos entender algunos conceptos clave, por ejemplo el flujo normal, que nos va a permitir saber como es la forma en que se presentan los elementos de la página web.

🧐¿Qué es el flujo normal del HTML?

El flujo normal (normal flow) en HTML es el orden natural en el que los elementos aparecen en pantalla, es decir, los elementos aparecerán colocados tal como estén ordenados en el código HTML solo si no se aplica ningún CSS que cambie la forma en la que se comportan.

Por ejemplo, si colocamos un encabezado (en el código HTML) <h1>Title</h1> y debajo un párrafo <p>lorem...</p> el navegador primero dibuja el encabezado y después el párrafo y así sucesivamente.

🤔¿Qué es un elemento posicionado?

Un elemento posicionado es aquel elemento que ha salido de su flujo normal a través de la propiedad position, además adquiere nuevas propiedades.
La propiedad position establece en que punto de la pagina comenzara a posicionarse, mostrarse o dibujarse el elemento que se haya establecido en el código HTML.

Es importante saber desde que punto se va a comenzar a pintar porque eso es lo que dirá que espacio ocupara cada elemento, por defecto si no se especifica, los elementos se crean con la propiedad position y el valor static, los elementos comenzaran a pintarse desde la esquina superior izquierda del elemento padre (0 x 0).

Los diferentes tipos de posicionamiento son los siguientes:

  • static (valor por defecto)
  • relative (El elemento se coloca relativo al flujo normal)
  • absolute (El elemento se coloca respecto a su contenedor posicionado mas cercano)
  • fixed (El elemento se coloca respecto al viewport)
  • sticky (Es una combinación entre relative y fixed)

Todos los elementos HTML son posicionados como estáticos por defecto, esto es, para hacer que el elemento fluya en el orden natural de la pagina, es decir, que el elemento siempre será posicionado de acuerdo al flujo normal de la pagina.

Al tener un elemento posicionado podemos moverlo en los 3 ejes y corresponden a cinco propiedades:

↔️ Eje X:

  • right(mover el elemento desde la parte derecha hacia la izquierda)
  • left(mover el elemento desde la parte izquierda hacia la derecha)

↕️ Eje Y:

  • top (mover el elemento desde la parte superior hacia la inferior)
  • bottom(mover el elemento desde la parte inferior hacia la superior)

🔄 Eje Z:

  • z-index(cuando dos o mas elementos se solapan, podemos decidir cual aparece primero y cual por detrás de el).

⚠️ Las propiedades top, right, bottom, left y z-index no funcionaran y no serán habilitadas para los elementos con posicionamiento estático por lo tanto los elementos no se podrán mover o desplazar.

En la propiedad z-index solo se especifica un numero entero positivo/negativo, no se usa unidades tales como pixeles o porcentajes. La propiedad z-index toma un valor numérico entre 0 y ±2147483647 en la mayoría de los navegadores comunes.
Es recomendable no usar valores consecutivos como: 1,2,3,4...

⏹️Contexto

Un contexto o también llamado punto de referencia es un área, podemos verlo como un rectángulo imaginario a través del cual los elementos van a poder posicionarse, moverse, alinearse o distribuirse.

Cuando hablamos de posicionamiento, el contexto es la posición inicial del elemento (donde esta originalmente) y desde el cual se calcula hacia donde se va a mover el elemento posicionado cuando colocamos ya sea bottom,right,left,top.

💡 Cabe mencionar que el navegador reserva un espacio para cada uno de los elementos y esto lo hace para que ningún otro elemento ocupe ese espacio, esto también se le conoce como espacio reservado.

🔎 Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

Discussion (11)

Collapse
renatoayau profile image
Renato Ayau

Tegno una duda, porque no es recomendado usar valores consecutivos en z-Index

Collapse
xantosromero profile image
Info Comment hidden by post author - thread only accessible via permalink
Santos Romero

Se considera buena práctica tener un intervalo de por lo menos de 10 cuando usas z-index, porque mientras el proyecto crece vas a ir superponiendo muchos elementos, y no tienes que estar adivinando qué elemento tenía 1, 2 o 3. Espero haber ayudado.

Sino mira también este tutorial youtu.be/eNGa5_yxmUw

Collapse
lupitacode profile image
Lupita Code 🌄 Author

La respuesta a tu pregunta la tengo en mi articulo sobre z-index y stacking context en el cual puse un ejemplo sobre que pasaría cuando agregamos valores consecutivos y los posibles problemas que nos pueden ocasionar cuando agregamos otro elemento extra :)
dev.to/lupitacode/guia-completa-y-...

Collapse
heykallo profile image
Carlos Andrés Orozco

Yujuuuuuu que excelente guia, gracias por compartir ya por fin estoy entendiendo el posicionamiento joder, hasta que por fin alguien lo explica muy bien.

Collapse
lupitacode profile image
Lupita Code 🌄 Author

Muchas gracias! en verdad aprecio y valoro mucho su comentario!

Collapse
xantosromero profile image
Santos Romero

Excelente artículo. Muchas gracias por compartir tus conocimientos con la comunidad y por ese esfuerzo fácil de entenderlo. 👏🏻👏🏻👏🏻

Collapse
lupitacode profile image
Lupita Code 🌄 Author

Muchas gracias por su comentario! :)

Collapse
matiasherranz profile image
Matías Herranz

EXCELENTE post! Muchas gracias por compartir!

Collapse
lupitacode profile image
Lupita Code 🌄 Author

Muchas gracias por su comentario!! :)

Collapse
juan_duque profile image
Juan Duque 🐉

Me gusto mucho :), me ayudo a interiorizar bastante el tema de posicionamiento.

Collapse
duxtech profile image
Cristian Fernando

Muchas gracias por tomarte el tiempo de escribir post de esta calidad!

Some comments have been hidden by the post's author - find out more