Uno de los primeros estilos que aprendemos cuando estamos estudiando CSS es el estilo position. En este artículo hablaremos sobre él. Vamos a conocer sus posibles valores, entender la diferencia entre ellos y resolver las dudas que podamos tener sobre posicionar elementos en nuestras páginas.
Para entender los conceptos, utilizaremos un ejemplo práctico. Crearemos un archivo llamado index.html. Dentro de él habrá un La estructura HTML será la siguiente: También tendremos un archivo llamado style.css que tendrá esta estructura: Este estilo será responsable de cargar la imagen en nuestra página. Al acceder al archivo HTML en el navegador, veremos lo siguiente: Ahora vamos a empezar a definir los estilos position para nuestra imagen, y veremos cómo su posición cambia según los diferentes valores de este estilo. Algo importante que debemos recordar al trabajar con el estilo position es que, al definir este estilo, necesitamos usar los estilos top, bottom, right y left para definir dónde quedará el elemento en la página. Podemos decir que estos estilos definen las “coordenadas” de posición de los elementos. Teniendo en cuenta este punto importante, analicemos ahora cada posible valor para el estilo position. El primer valor que vamos a analizar es el estilo position: static. Este es el valor predeterminado para la posición de cualquier elemento. Cuando lo aplicamos, definimos que el elemento será posicionado de acuerdo con el flujo normal de la aplicación, es decir, su posición no será afectada. Nuestro archivo CSS quedará así: En teoría, nuestra imagen debe desplazarse 50 píxeles hacia la derecha y 50 píxeles hacia abajo. Volviendo al navegador, veremos el siguiente resultado: Quizás pensemos: “la posición de la imagen no cambió, sigue en el mismo lugar”. Este es exactamente el efecto del static. Los estilos top, bottom, right y left simplemente no funcionan. Esta excepción ocurre solo con el valor static. Nos damos cuenta de que en realidad deja al elemento “estático”. El valor relative define que el elemento podrá tener su posición alterada. Su posición será relativa a sí mismo, a su posición inicial. Vamos a añadir este estilo en nuestro código con la siguiente línea: Veremos el siguiente resultado en el navegador: Nota que ahora el desplazamiento del elemento realmente ocurrió, siguiendo las “coordenadas” que informamos en el archivo CSS con top y left. Cuando hablamos de posicionamiento con CSS, una de las primeras dudas que podemos tener es sobre la diferencia entre position relative y position absolute. Vamos a entender la diferencia entre ellos ahora. Un elemento que tiene el position como absolute tendrá una posición relativa a un elemento ancestral. En realidad, definirá su posición basándose en el elemento padre que tenga un position como relative. Si no hay ningún elemento antes de él que tenga este tipo de position, la posición será relativa al propio navegador. Veamos en la práctica cómo funciona. Vamos a reemplazar el valor de position en nuestro selector #image: Pero, antes de probar, vamos a definir un position relative para la etiqueta con id “#principal”. Además, moveremos este Este será el resultado en el navegador: Al analizar el navegador, podemos notar dos cosas: 1 - Nuestra imagen quedó encima de los elementos de texto. Este es el efecto que realiza el position absolute, deja al elemento como “suelto” en la página, y podemos posicionarlo donde queramos. 2 - Hay un espacio en blanco a la izquierda de la imagen y de los párrafos, lo que demuestra que el desplazamiento de 150 píxeles realmente ocurrió. Así, nuestra imagen respetó la posición de su elemento padre, el Esto sucede incluso si el estilo left: 150px continúa aplicado a la etiqueta “#principal”. Así, si alguien nos pregunta cuál es la diferencia entre position relative y position absolute, podemos decir: “La diferencia entre ellos es básicamente cuál elemento será usado como referencia para realizar el posicionamiento. El relative tiene en cuenta su propia posición para desplazarse. En cambio, el position absolute tiene en cuenta la posición del elemento padre que tenga un position relative o será relativo al propio navegador”. El position absolute es muy interesante, pero úsalo con cuidado, especialmente si estás trabajando con responsivo. El hecho de posicionar el elemento donde queramos puede causar muchos dolores de cabeza cuando tengamos que reposicionarlo en dispositivos más pequeños. El position fixed, como su propio nombre indica, define que el elemento quedará fijo en la página. Es decir, siempre estará visible. Incluso si desplazamos el scroll, seguirá siendo mostrado. Para ver este estilo en práctica, tendremos que forzar a nuestra página a generar un scroll. Por eso, dejaremos el CSS del selector “#principal” así: Y vamos a cambiar la posición de nuestra imagen a fixed: Cuando volvemos al navegador, vemos el siguiente resultado: Parece que la posición está como absolute, porque no cambió nada en relación con el último ejemplo. Pero, al desplazar el scroll, veremos lo siguiente: Nota que la imagen continúa en su posición, incluso teniendo que “pasar por encima” de otros elementos y sigue fija en la página. Este estilo puede ser usado cuando queremos crear un menú de navegación que continúe siendo mostrado sin importar dónde esté el usuario en la página, incluso al desplazar el scroll. Quizás ya hayas visto algunos de estos modelos en otros sitios web. El position sticky se define como la unión de los conceptos de position relative y position fixed. Cuando se aplica a un elemento, su posición está basada en el scroll del usuario y el elemento será mostrado mientras su elemento padre esté en el display de la página. ¡Vamos entonces al ejemplo! Vamos a sustituir el valor de position en el archivo CSS: Al actualizar el navegador, veremos lo siguiente: El elemento parece al principio tener el position relative. Después de todo, respetó las “coordenadas” informadas para su posición, pero no está por encima de ningún otro elemento. Pero, si desplazamos el scroll, veremos lo siguiente: Nota que ahora la imagen está por encima de los párrafos, así como el position fixed. Sin embargo, el position sticky no es completamente igual al position fixed. Como comentamos anteriormente, el elemento al que aplicamos este estilo solo será mostrado mientras su elemento padre también esté siendo visible. Para ver esta diferencia en práctica, vamos a crear otro Además, alteraremos el CSS de “#principal” para este: Ahora ambos div tendrán 500 píxeles de altura. Cuando volvamos a nuestro navegador, notamos que el estilo sigue funcionando. Pero, cuando llegamos casi al final de la página, vemos lo siguiente: Nuestra imagen no se quedó por encima de los párrafos del otro En este artículo aprendimos todos los valores posibles del estilo position y vimos los recursos que cada valor de este estilo nos ofrece. Así, ahora estamos en condiciones de decidir cuándo usar cada uno. Puedes encontrar el código desarrollado en este artículo en nuestro GitHub. Así podrás realizar tus propias pruebas :) ¡Nos vemos en el próximo artículo! Regístrate en la plataforma de cursos y sigue las próximas guías del blog.#image {
background: url('./hcode.svg') no-repeat;
width: 450px;
height: 150px;
}
static
#image {
background: url("./hcode.svg") no-repeat;
width: 450px;
height: 150px;
position: static;
left: 50px;
top: 50px;
}
relative
position: relative;
absolute
position: absolute;
#principal {
position: relative;
left: 150px;
}
fixed
#principal {
height: 1000px;
}
position: fixed;
sticky
position: sticky;
#principal, #second-div {
height: 500px;
}
Sigue aprendiendo con Hcode
