Posicionando elementos con CSS 🖼
Cuando trabajamos haciendo interfaces de usuario, una de las cosas que suele resultar más complicado es colocar elementos de manera adecuada.
Para ello existen 2 cosas que debemos considerar: la posición (position: static, relative, absolute, fixed), y sus propiedades (properties: top, bottom, right, left); las cuales nos permitarán elegir dónde van a ir nuestros elementos.
Cada una de estas propiedades funcionará de manera distinta dependiendo del posicionamiento que elijamos, sin embargo, para static, éstas propiedades no tendrán efecto alguno. A continuación, revisamos cada posición disponible:
POSICIÓN ESTÁTICA (STATIC)
La posición static es la posición que tienen los elementos de manera predeterminada y sigue el flujo normal del documento. Los elementos con este tipo de posicionamiento no se ven afectados por las propiedades top, right, bottom, left ni z-index.
POSICIÓN RELATIVA (RELATIVE)
La posición relative funciona de manera similar a la posición static, con la diferencia de que se puede alterar la posición de un elemento con esta posición a través de las propiedades top, bottom, right y left. Es decir, si decidimos que nuestro elemento tiene una posición relativa de top: 20px; y left: 40px; estamos diciendo que se desplace 20px hacia abajo y 40px hacia la derecha de donde debería estar originalmente.
POSICIÓN ABSOLUTA (ABSOLUTE)
La posición absolute permite indicar que un elemento va a estar totalmente fuera del flujo normal del documento, y su posición dependerá de las propiedades top, bottom, right y left; esto, sin afectar a los elementos que están antes o después de dicho elemento.
Los elementos con este posicionamiento se ubicarán al extremo superior izquierdo del elemento padre más cercano que tenga posicionamiento relative, a menos que se especifiquen las propiedades top, right, bottom o left.
POSICIÓN FIJA (FIXED)
La posición fixed funciona de manera similar a la absolute pero con respecto a todo el documento HTML, es decir, sin importar a dónde nos desplacemos dentro de la página, nuestro elemento siempre permanecerá en la misma posición.
También es importante definir un z-index para mostrar siempre el elemento sobre cualquier elemento que pudiese tener un posicionamiento relative o absolute.
POSICIÓN PEGADA (STICKY)
La posición sticky combina las posiciones relative y fixed en una. Comienza como posición relative pero, cuando hacemos scroll y el elemento sale del documento, este toma la posición fija. Es importante tomar en cuenta que este posicionamiento requiere definir al menos una propiedad top, right, bottom, o left.
En este blog hemos visto los distintos tipos de posicionamientos disponibles en CSS y la importancia de conocer cómo funcionan.
Espero les haya sido de ayuda y aclarado dudas. En el siguiente repositorio pueden revisar el código.
No olviden dejar su reacción y comentario 😄.