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.
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.
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.
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><h1class="Header_Title--design">¡Ejemplos de positions!</h1><sectionclass="Section_Padre--container"><divclass="Bloque_Hijo--uno">1</div><divclass="Bloque_Hijo--dos">2</div><divclass="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 {}
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.
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”.
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 {}
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.
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.
¡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.
Gracia si por la publicación.
Ahora entiendo cómo hacen que los iconos de compartir en los posts se muevan y se queden fijos con sticky 🤗
Exactamente. A mí me sorprendió que se hicieran tan fácil. Antes se usaba JavaScript. Pero los position hicieron que fuera mucho más fácil.
Muy buen post, me sirvió muchisimo!
Graciasss, necesitaba esto, tenía la duda de cómo usar position. ¡Ahora lo tengo clarísimo!
¡Excelente! Que bueno que te sirvió, ahora nos toca practicar 💚
Gracias por compartir! Nada más un aporte sobre
position: relativeTu indicas que “No toma en cuenta ningún otro elemento del HTML para posicionarse” pero si lo hace ya que se posiciona de acuerdo al padre.
Saludos!
¡Hola! 😃 Gracias por comentar. Revisé lo que me planteas y creo que hay una pequeña confusión.
Así que hice 3 ejemplos adicionales para ilustrarlo.
Cuando menciono que “No toma en cuenta ningún otro elemento del HTML para posicionarse”, me refiero a que una vez ubicado en el HTML (en este caso dentro de ese contenedor) al usar relative; toma la posición que tiene en ese momento y a partir de allí se puede mover con top, bottom, right y left. Esto lo hace sin tomar en cuenta los elementos de su entorno. Solo su propia posición.
Como puedes ver, en el caso 3 de la imagen, el bloque 2 tiene un top 0. Sin embargo, como su position es relative y su top inicia desde sí mismo, no cambia de posición (puesto a que ya esta en top 0). Si se posicionara con respecto al contenedor, entonces se ubicaría en el borde superior del contenedor (como en el ejemplo de absolute).
En el caso 1 y 2 puedes visualizar esa linea imaginaria que se crea como referencia de la posicion original del elemento. Seria como el espacio original el cual tomará de referencia para desplazarse.
El position que si se posiciona con respecto al padre, en el position absolute. Siempre que el elemento padre tenga un position relative
Espero que así se entienda un poquito mejor ❤️
Muy bueno el post, se entiende muy bien! 👌
¡Gracias! es un gusto muy grande saber qué le fue útil a alguien. 😃
Excelente Articulo sobre position en css. A veces suele ser un dolor de cabeza utilizar esta propiedad. Bastante claro los ejemplos y en que momento debemos usarlos.
Que gusto que te sirviera el artículo 😃 Ahora solo queda practicar para que no hayan dolores de cabeza 💪
Excelente aporte!
¡Muchas gracias!☺️
Gracias por el aporte, practicando estos nuevos temas nos convertiremos en expertos!!!
¡Claro que sii! Todos unos ninjas del frontend 🤩
Excelente explicación. muchas gracias.
Muchas gracias Linda😀 que bueno que te sirvió
Ey, enserio, muchas gracias, me ayudaste a resolver un problema de que lleva rompiendo la cabeza por horas
Gracias, fue de mucha utilidad leer tu articulo.
Saludos!
Gracias! Bastante ilustrativo 🤩
Buen tutorial. Acabo de ver tu website. Es lo que podríamos decir algo conciso y resumido y aún así lleno de detalles.
Éxitos.
Gracias @mariwrios, lo entendí muy bien, me sirvió muchísimo. Ahora ya entiendo como puedo diseñar dibujos con css (pokemon) 😃
Solo una precisión, en el position: sticky no solo puede indicarse el top, sino también bottom, right y left.
Gracias este gran apoyo en la comunidad 😉
Muchas gracias, justo ahora necesitaba repasar este tema.
slds.