¡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
Top comments (15)
Excelentes artículos Lupita. Vengo aprendiendo full web PERN y muchas veces me encuentro con temas que no me terminan de cerrar y vengo a parar a tu blog donde queda clarisimo. Saludos.
¡Muchas gracias, Claudio! En Medium puedes encontrar mis otros artículos sobre las unidades de medida en CSS:
medium.com/@lupitacode
Tegno una duda, porque no es recomendado usar valores consecutivos en z-Index
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
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-...
Yujuuuuuu que excelente guia, gracias por compartir ya por fin estoy entendiendo el posicionamiento joder, hasta que por fin alguien lo explica muy bien.
Muchas gracias! en verdad aprecio y valoro mucho su comentario!
EXCELENTE post! Muchas gracias por compartir!
Muchas gracias por su comentario!! :)
Excelente artículo. Muchas gracias por compartir tus conocimientos con la comunidad y por ese esfuerzo fácil de entenderlo. 👏🏻👏🏻👏🏻
Muchas gracias por su comentario! :)
Me gusto mucho :), me ayudo a interiorizar bastante el tema de posicionamiento.
Muchas gracias por tomarte el tiempo de escribir post de esta calidad!
Pura calidad xD
Te la sabes,deberías poner tu canal de YouTube
muchas gracias.
Este es mi canal de Youtube, incluso lo agregue al final de mi articulo, están todas mis redes sociales
youtube.com/lupitacode
Some comments have been hidden by the post's author - find out more