Posicionar elementos con CSS en el desarrollo web no es tan fácil como parece. Las cosas pueden complicarse rápidamente a medida que su proyecto se hace más grande y sin tener una buena comprensión de cómo CSS se ocupa de alinear elementos HTML, no podrá solucionar sus problemas de alineación.
Hay diferentes formas / métodos para posicionar elementos con CSS puro. El uso de propiedades flotantes, de visualización y de posición de CSS son los métodos más comunes.
En este artículo, explicaré una de las formas más confusas de alinear elementos con CSS puro: la propiedad de posición. También tengo otro tutorial para la propiedad de visualización CSS aquí.
Si lo prefiere, puede ver la versión en video del Tutorial de posicionamiento CSS:
Vamos a empezar...
Posición CSS y propiedades auxiliares
Entonces hay 5 valores principales de la propiedad de posición :
position: static | relative | absolute | fixed | sticky
y propiedades adicionales para establecer las coordenadas de un elemento (las llamo "propiedades auxiliares" ):
top | right | bottom | left Y el z-index
¿Qué es este índice Z?
Tenemos alto y ancho (x, y) como 2 dimensiones. Z es la tercera dimensión. Un elemento de la página web aparece delante de otros elementos a medida z-indexque aumenta su valor.
position: statico sin una posición declarada.
Puede ver el video en mi canal para ver cómo usar el índice Z con más detalles:
Ahora sigamos con los valores de las propiedades de posición ...
1. Estático
position: statices el valor predeterminado . Ya sea que lo declaremos o no, los elementos se colocan en un orden normal en la página web. Pongamos un ejemplo:
Primero, definimos nuestra estructura HTML:
Luego, creamos 2 cajas y definimos sus anchos, alturas y posiciones:
.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }
Como podemos ver en la imagen, definir la posición: estática o no no hace ninguna diferencia.Las cajas se colocan de acuerdo con el flujo normal de documentos .
2. Relativo
position: relative: La nueva posición de un elemento en relación con su posición normal.
Comenzando con position: relativey para todas las posiciones no estáticasvalores, podemos cambiar la posición predeterminada de un elemento mediante el uso de las propiedades auxiliares que mencioné anteriormente.
Muevamos el cuadro naranja al lado del azul.
.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
NOTA: Usar posición: relativa para un elemento, no afecta las posiciones de otros elementos.
3. Absoluto
En position: relative, el elemento se posiciona con respecto a sí mismo. Sin embargo, una absoluta LyEl elemento posicionado es relativo a su padre .
Un elemento con position: absolutese elimina del flujo de documentos normal. Se coloca automáticamente en el punto de inicio ( esquina superior izquierda) de su elemento principal. Si no tiene ningún elemento principal, el documento inicial será su padre.
Dado que position: absoluteelimina el elemento del flujo de documentos, otros elementos se ven afectados y se comportan cuando el elemento se elimina por completo de la página web.
Agreguemos un contenedor como elemento padre:
.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }
Ahora parece que la caja azul ha desaparecido, pero no lo ha hecho. El cuadro azul se comporta como si se quitara el cuadro naranja, por lo que se desplaza hacia el lugar del cuadro naranja.
Muevamos el cuadro naranja 5 píxeles:
.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }
Las coordenadas de un elemento posicionado absoluto son relativas a su padre si el padre también tiene una posición no estática. De lo contrario, las propiedades auxiliares colocan el elemento en relación con el inicial.
.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }
4. Fijo
Al igual que position: absolute, los elementos de posición fija también se eliminan del flujo normal de documentos. Las diferencias son:
- Son solo relativos al documento, no a otros padres.
- No se ven afectados por el desplazamiento .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }Aquí en el ejemplo, cambio la posición del cuadro naranja a fijo , y esta vez es relativo 5px a la derecha del, no su padre (contenedor) :
As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.
5. Sticky
position: sticky can be explained as a mix of position: relative and position: fixed.
It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:
IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.
The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.
If you want to learn more about web development, feel free to follow me on Youtube!
Thank you for reading!