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.

Imagen con la tabla de opciones que tiene position CSS.
Tomado de Platzi.com

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.

Próxima lectura

Lectura anterior

Newsletter

* Campo requerido

Powered by Mailchimp

Position en CSS