Position absolute

Oi, Chistopher, tudo bem?

O instrututor está correto na sua definição e a outra definição também, mas ambos são aplicados de formas diferentes. 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 = ]

Perfeita explicação, muito obrigado !