¡Aprende a mover elementos de su lugar con CSS!

Para mover elementos dentro de un determinado contenedor que los contiene (redundancia 🫠), la propiedad que usaremos será position.

Este será nuestro código inicial:

<divclass="container">
        <divclass="item"></div>
        <divclass="item"></div>
        <divclass="item"></div>
        <divclass="item"></div>
    </div>

.container {
    width: 500px;
    height: 500px;
    background-color: antiquewhite;
}

.item {
    width: 100px;
    height: 100px;
}

.item:nth-child(1) {
    background-color: red;
}

.item:nth-child(2) {
    background-color: blue;
}

.item:nth-child(3) {
    background-color: green;
}

.item:nth-child(4) {
    background-color: yellow;
}

Así luciría sólo nuestro contenedor:

Y así luce con sus elementos dentro:

Moviendo los elementos con position

Para poder mover los elementos en cualquier otro espacio de su contenedor, es importante declarar position: relative a las propiedades de nuestro container.

.container {
    width: 500px;
    height: 500px;
    background-color: antiquewhite;
    /* Agregamos position: relative */position: relative;
}

Y a continuación, agregamos position: absolute al elemento hijo que queramos mover (en este ejemplo, usaremos al elemento azul):

.item:nth-child(1) {
    background-color: red;
}

.item:nth-child(2) {
    background-color: blue;
    /* Nuevas propiedades agregadas */position: absolute;
    top: 0;
}

.item:nth-child(3) {
    background-color: green;
}

.item:nth-child(4) {
    background-color: yellow;
    
}

Como habrás observado, usamos la declaración top: 0 para colocar al elemento azul a la cabeza de la columna y cubriendo el lugar original del elemento rojo, el cual queda por debajo de la capa del elemento azul.

Usando position: absolutey las propiedades top, right, bottom y left, ¡puedes mover libremente los hijos dentro del container!

.item:nth-child(1) {
    background-color: red;
    position: absolute;
    left: 120px;
}

.item:nth-child(2) {
    background-color: blue;
    position: absolute;
    top: 0;
}

.item:nth-child(3) {
    background-color: green;
    position: absolute;
    bottom: 40px;
}

.item:nth-child(4) {
    background-color: yellow;
    position: absolute;
    right: 10px
    
}

Copia y pega este código en tu editor y juega añadiendo otros valores y elementos. 😄