Es la manera en la cual podemos posicionar las cajas. En el navegador la posición por defecto es “static”, quedan donde tú las colocas. Por eso, todos los bloques se ubican uno debajo de otro.
Sin embargo, tenemos la flexibilidad de utilizar otros tipos de posicionamiento como:
- Absolute. Hace que los contenedores pierdan su posición en un conjunto de elementos
- Relative. Los contenedores no pierden posición, pero se puede modificar su comportamiento
- Fixed. Es similar al posicionamiento absolute, excepto que su contenedor es el inicial establecido por el viewport. Se puede usar para crear un efecto “flotante” que permanece en la misma posición independietemente del desplazamiento.
- Sticky. El contenedor mantiene su posición. Para observar el efecto sticky es necesario hacer scroll en la pantalla.
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Position</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } .parent{ border: 2px black dotted; display: inline-block; } .box { display: inline-block; background-color: coral; width: 100px; height: 100px; } #two { background-color: chocolate; } </style></head><body> <div class="parent"> <div class="box" id="one">1</div> <div class="box" id="two">2</div> <div class="box" id="three">3</div> <div class="box" id="four">4</div> </div></body></html>Nota: cuando los bloques están en “static” no se puede ejecutar las propiedades: top, right, bottom y left. Es decir, no se puede modificar.