Te ha pasado que navegas por internet y de repente ¡boom! Encuentras una página increíble. Entonces sientes la necesidad de saber cómo construir algo así. Si la respuesta es sí, eres de los míos. Hoy quiero ayudarte a mejorar tus skills para que construyas la página de tus sueños. Así que ¡anímate! Y sigue leyendo.
Position ¿qué es?
Todos los elementos de un archivo HTML tienen un valor de position static por defecto, el cual no representa ningún cambio para el mismo. Pero al utilizar la propiedad position en CSS podemos cambiar el valor static y modificar la ubicación de nuestros elementos en el DOM. Puede adquirir ciertos valores como lo son:
-
Relative
-
Absolute
-
Fixed
-
Sticky
Entonces, si tú quieres que un elemento tenga una posición absoluta, solo tienes que agregar la siguiente línea de código.
.Mi_elemento { position: absolute}
Puedes hacer esto con todos los valores de position. Pero esto es solo la punta del iceberg.
Existen otras propiedades que se desbloquean (por decirlo de alguna forma) al agregar la propiedad position a un elemento. Estas otras propiedades son top, bottom, right, left y z-índex. No surten efecto sobre un elemento con position static.
Se usan para desplazar al elemento según sea el caso. Es decir, si utilizamos en CSS la siguiente sentencia:
.Mi_elemento {
position: relative;
top: 100px;
}
Esto nos indica que el elemento va a tomar como referencia su posición actual y a partir de allí se va a desplazar desde su top 100 píxeles.
También tenemos z-index
Esta propiedad es análoga al concepto de capas en los programas de diseño. En primera instancia, todos los elementos de tu proyecto se encuentran en el mismo nivel o en la misma capa.
Con z-index puedes establecer si un elemento se posiciona por encima o debajo de otro. Por defecto, el z-índex de un elemento es cero. Basta con igualar la propiedad a un número para que adquiera ese número como capa o nivel.
.Mi_elemento {
position: relative;
top: 100px;
z-index: 1;
}
Puede resultar un poco confuso al principio, pero al entenderlo podrás darle a tus diseños efectos increíbles.
¿Aún no lo entiendes muy bien? ¡Hagamos unos ejemplos!
Construí un pequeño HTML para que puedas visualizarlo mejor. Como puedes ver, la estructura es muy simple. Solo tiene un título, una sección con 3 div y algunos estilos.
<body>
<h1 class="Header_Title--design">¡Ejemplos de positions!</h1>
<section class="Section_Padre--container">
<div class="Bloque_Hijo--uno">1</div>
<div class="Bloque_Hijo--dos">2</div>
<div class="Bloque_Hijo--tres">3</div>
</section>
</body>
Para el CSS nos enfocaremos en el comportamiento de los 3 cuadrados enumerados. En primera instancia, no poseen ningún position establecido, como se muestra a continuación.
.Bloque_Hijo--uno {}
.Bloque_Hijo--dos {}
.Bloque_Hijo--tres {}
Position: relative
Relative te permite posicionar el elemento con respecto a sí mismo. No toma en cuenta ningún otro elemento del HTML para posicionarse.
Ejemplo
.Bloque_Hijo--uno {
top: 100px;
}
.Bloque_Hijo--dos {
position: relative;
top: 100px;
}
.Bloque_Hijo--tres {
position: relative;
right: 60px;
bottom: 40px;
}
Puedes observar que el Bloque 1 no se desplaza, esto ocurre porque su position es static. Por otro lado, el bloque 2 y el 3 si se desplazan. Lo hacen con respecto a su posición original usando los valores top, bottom y right.
Position: absolute
Los elementos con position absolute se ubican con respecto al elemento relativo padre más cercano. Si no defines ningún elemento relativo en tu CSS, el elemento absoluto se ubicara con respecto al último ancestro de tu archivo HTML.
Ejemplo
.Bloque_Hijo--uno {}
.Bloque_Hijo--dos {
position: absolute;
top: 0;
}
.Bloque_Hijo--tres {}
Al no determinar ningún elemento relativo, el bloque 2 se posiciona con respecto al body. ¿Qué sucede si determinamos un elemento relativo? Pues veamos.
.Section_Padre--container {
position: relative;
}
.Bloque_Hijo--uno {}
.Bloque_Hijo--dos {
position: absolute;
top: 0;
}
.Bloque_Hijo--tres {}
Se cumple que el elemento absoluto se posiciona con respecto al elemento relativo más cercano. Que en este caso es el elemento ”Section_Padre–container”.
Position: fixed
Con la propiedad fixed, el elemento se ubica con respecto al viewport y se mantendrá fijo en su posición mientras el usuario se desplaza dentro de la página.
Ejemplo
.Bloque_Hijo--uno {}
.Bloque_Hijo--dos {
position: fixed;
top: 0px;
}
.Bloque_Hijo--tres {}
Position: sticky
Sticky tiene una funcionalidad similar al fixed. La diferencia es que permanece en su lugar hasta que se hace scroll y es alcanzado. A partir de allí se mantiene fijo en un lugar designado por la propiedad top, hasta que se haga scroll contrario.
Siempre debe usarse en conjunto con la propiedad top para que funcione.
Ejemplo
.Bloque_Hijo--uno {}
.Bloque_Hijo--dos {
position: sticky;
top: 0px;
}
.Bloque_Hijo--tres {}
¡Listo! Ya sabemos utilizar correctamente position. Ahora solo debemos hacer un ejemplo más para mostrarte cómo funciona el z-index.
Z-index
Como te mencioné antes, no funciona con position static y posiciona los elementos en otros niveles o capas.
Ejemplo
.Bloque_Hijo--uno {
position: relative;
z-index: -1;
}
.Bloque_Hijo--dos {
position: relative;
top: 20px;
left: 30px;
}
.Bloque_Hijo--tres {
position: relative;
z-index: 1;
right: 0px;
bottom: 100px;
}
Cada bloque tiene una posición relativa, así como un z-index diferente. Puedes ver como el bloque 1 esta debajo del contenedor. A su vez, el bloque 2 y el contenedor estan por debajo del bloque 3.
Cada bloque se encuentra en un nivel o capa diferente, donde no interactúan con los elementos de otros niveles.
Ahora es tú turno de hacer los ejemplos
¡Felicidades! Si llegaste hasta aquí significa que sabes usar correctamente los position. ¡Wohoo! Pero la cosa no acaba aquí.
Si te interesa el mundo del frontend ¡debes ingresar ya! Al Curso de Frontend Developer de la Escuela de JavaScript.
Allí aprenderás todas las herramientas para mejorar tus skills y comenzar desde cero un increíble proyecto. ¡Como todo un profesional! ¡Anímate!
Si tienes dudas con algún elemento de position, deja un comentario en este post y con gusto te ayudaré a resolverlo.
Nunca pares de aprender ❤️
Curso de Frontend Developer 2019
