positions

Olá Washington, tudo certo?

Com o position absolute, o elemento é removido da direção normal do documento. Nenhum espaço é criado para esse elemento no layout da página.

Ao invés disso, o mesmo é posicionado relativo ao seu ancestral posicionado mais próximo, se houver(no seu caso, uma div). Caso contrário, será relativo ao bloco inicial.

Deu pra entender pq ele se posiciona diferente quando está dentro de uma div?

Qualquer coisa estamos aí.

Bons estudos!

Oi, Washington, tudo bem?

O que o position: absolute faz é se deslocar a partir do browser assim como respeitando o seu pai, mas depende de algumas coisas... O position padrão dos elementos é o static. Vê esse mini exemplo:

 <div class="quadrado quadrado-first">
    Quadrado
  </div>

.quadrado {
  width: 150px;
  height: 150px;
  line-height: 200px;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
}

.quadrado-first {
  background-color: red;

Eu desejo mover essa div que está do meu lado esquerdo do navegador usando por padrão a propriedade static, ou seja, se eu usar o right: 0; teoricamente o meu quadradro deveria para o lado direto, certo? Mas ele não vai porque o position static impede. O position absolute pode nos ajudar nisso.

.quadrado-first {
  position: absolute;
  right: 0;
  background-color: red;

Pronto! Agora, ele irá para o lado direito do navegador como eu desejo. Mas como funciona? Quando usamos o absolute é criado um novo contexto para o elemento em questão, a div, ocupando um espaço no navegador que indicamos. Esse exemplo é forma que o absolute respeita o navegador.

Mas se criarmos uma nova div menor, dentro da que já definimos, ficando o filho dentro do pai e o meu objetivo é deixar o quadro menor no centro do quadrado maior:

 <div class="quadrado quadrado-first">
    <div class= "quadrado-menor"> Menor</div>
  </div>

.quadrado-menor{
  position: absolute;
  width: 75px;
  height: 75px;
  line-height: 100px;
  background-color: blue;
  left: 50%;
  top: 50%;
  transform: translate (-50%,  -50%);
}

Aqui, o quadrado-menor usando o position absolute respeita o seu pai, quadrado-first (ambos estão usando position: absolute) que está com um position diferente de *static . Se usar o position relative na div pai, a div filho também irá respeitar.

Então, se você quiser que um elemento filho respeite o seu pai, o pai precisa, necessariamente, ser diferente de position: static. O position absolute tanto se move de acordo com o pai, tanto com o navegador = ]

Nossa galera muito obrigado!! essas explicações me ajudaram muito. Entendi que o elemento sempre vai respeitar o pai