Sempre existe aquele momento na vida de um aspirante a Front-End que ele precisará posicionar um elemento com Position Relative e Absoute. Por mais que você evite passar por isso, é certo que seu destino está celado. E na maioria das vezes quando a hora chegar, muitos vão correr pela internet pra achar algum artigo explicando o assunto, mas ao invés de lerem, vão copiar o código, sem exatamente entender o que fizeram.

É por isso que trago esse post pra explicar de uma forma simples como funciona o position relative e o position absolute. 

Então bora lá.

Pra ficar bem fácil de entender, simplesmente guarde a ordem de aplicação.
Div pai recebe o valor relative, e Div filho(filho direto) recebe o valor absoluto.

Com isso em mente, imagine que você tem uma div que vamos chamá-la de divPai e atribuiu a ela as seguintes propriedades em CSS.

   
<div class="divPai">
       
    </div>



.divPai{
        width: 300px;
        height: 300px;
        background: rgb(118, 110, 236);
    }





Agora vamos adicionar dentro dessa divPai, mais uma div, que chamaremos de divFilho, e atribuiremos a ela as seguintes propriedades em CSS

   
<div class="divPai">
        <div class="divFilho">
   
        </div>
    </div>


   
.divPai{
        width: 300px;
        height: 300px;
        background: rgb(118, 110, 236);
    }

    .divFilho{
        width: 150px;
        height: 150px;
        background: rgb(204, 65, 181);
    }


Assim que a segunda div for criada, por default(padrão), ela será posicionada no canto superior esquerdo da divPai. 


Agora imagine que queremos posicionar a div filho na parte inferior direita. Muitos pensariam: "Bora colocar um absolute ali e ver o que acontece."

A principio você vai adicionar o absolute na divFilho e nada vai acontecer, mas quando você atribui propriedades como left, top, com valores 0, você vai perceber que a div filho flutuou para fora da divPai.

E temos nosso primeiro erro.

Isso acontece, porque a divPai não possui uma posição relativa, logo, todo conteudo com propriedade position com valor absolute dentro do corpo da página, flutuará em referencia ao body, ou seja, a própria página. 

Para evitarmos esse efeito e corrigir isso, tudo que devemos fazer é adicionar a propriedade position com o valor relative a divPai 

   
.divPai{
        width: 300px;
        height: 300px;
        background: rgb(118, 110, 236);
        position: relative;
    }

    .divFilho{
        width: 150px;
        height: 150px;
        background: rgb(204, 65, 181);
        position: absolute;
        top: 0;
        left: 0;
    }

 

Automáticamente sua div voltará para a posição inicial. A partir daqui, basta posicionarmos a divFilho onde queremos.


Repare agora em cada propriedade e valor utilizado para posicionar a divFilho dentro da divPai.

Item filho alinhado na parte inferior esquerda:

   
.divFilho{
        width: 150px;
        height: 150px;
        background: rgb(204, 65, 181);
        position: absolute;
        bottom: 0;
        left: 0;
    }




Alinhado na parte inferior direita:

   
.divFilho{
        width: 150px;
        height: 150px;
        background: rgb(204, 65, 181);
        position: absolute;
        bottom: 0;
        right: 0;
    }




Alinhado na parte superior direita:

    .divPai{
        width: 300px;
        height: 300px;
        background: rgb(118, 110, 236);
        position: relative;
    }

    .divFilho{
        width: 150px;
        height: 150px;
        background: rgb(204, 65, 181);
        position: absolute;
        top: 0;
        right: 0;
    }



Agora que já conhecemos os valores absolute e relative da propriedade position, que tal aplicarmos esse conhecimento, criando o tabuleiro de xadrez do chaves ? :)

Para isso vamos criar mais uma div filho. Só pra mantermos uma semantica que faça sentido, vamos alterar o nome da divFilho para divPrimeiroFilho e criarmos a segunda com o nome divSegundoFilho e atribuir a ela mesma propriedade da div já existente. Vamos alterar a cor da divPai para branco e colocar uma borda solida preta nela. As divs filhas receberão a cor preta.

Na div divPrimeiroFilho, vamos aplicar o position absolute, com as propriedades left e top com os valores 0, e na divSegundoFilho, vamos aplicar o position abolute , com as propriedades right e bottom com os valores 0

   
.divPai{
        width: 300px;
        height: 300px;
        background: #fff;
        position: relative;
        border: solid 1px #000;
    }

    .divFirstFilho{
        width: 150px;
        height: 150px;
        background:  #000;
        position: absolute;
        top: 0;
        left: 0;
    }

    .divSecondFilho{
        width: 150px;
        height: 150px;
        background: #000;
        position: absolute;
        bottom: 0;
        right: 0;
    }



Esse Post foi util pra você?