Gua completa y prctica 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 pgina 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 aparecern colocados tal como estn ordenados en el cdigo HTML solo si no se aplica ningn CSS que cambie la forma en la que se comportan.

Por ejemplo, si colocamos un encabezado (en el cdigo HTML) <h1>Title</h1> y debajo un prrafo <p>lorem...</p> el navegador primero dibuja el encabezado y despus el prrafo y as sucesivamente.

Qu es un elemento posicionado?

Un elemento posicionado es aquel elemento que ha salido de su flujo normal a travs de la propiedad position, adems 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 cdigo 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 combinacin entre relative y fixed)

Todos los elementos HTML son posicionados como estticos 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 detrs de el).

Las propiedades top, right, bottom, left y z-index no funcionaran y no sern habilitadas para los elementos con posicionamiento esttico por lo tanto los elementos no se podrn 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 numrico entre 0 y 2147483647 en la mayora de los navegadores comunes.
Es recomendable no usar valores consecutivos como: 1,2,3,4...

Contexto

Un contexto o tambin llamado punto de referencia es un rea, podemos verlo como un rectngulo imaginario a travs del cual los elementos van a poder posicionarse, moverse, alinearse o distribuirse.

Cuando hablamos de posicionamiento, el contexto es la posicin 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 ningn otro elemento ocupe ese espacio, esto tambin se le conoce como espacio reservado.

Recursos:

• Flujo Normal | MDN
• Position | MDN
• z-index | MDN
• What the heck, z-index?? | Josh Comeau

Gracias por leer
Mis redes sociales donde comparto notas de cdigo:

Youtube
Instagram
Twitter
Facebook
Codepen
Medium
Tik Tok