Bom dia, eu estou com uma dúvida.

Fala Livio, tudo bem?

Recomendo assistir a um video de uma de nossas Scuba Teams, acesse clicando aqui que vai te ajudar a entender melhor sobre o position. Mas vamos lá

O posicionamento de um elemento define qual metedo de posição será usando por tal elemento e, além deo static, absolute, relative, há também o fixed e sticky. Para saber mais: https://www.w3schools.com/css/css_positioning.asp

• O position: static é o valor padrão do elemento, se não adicionarmos outros valor para o position, é o valor static que prevalece. Os elementos serão renderizados em ordem, conforme aparecem no fluxo do documento

• O position: absolute tem o poder de se deslocar a partir do browser assim como respeitando o seu elemento pai.

Esse exemplo pode ajudar a esclarecer mais:

 <div class="absolute -absolute-child">
    absolute
  </div>

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

.absolute-child {
  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.

• O position relative é relativo à a posição normal, então, se você quer que num elemento determinado seja adicionado 20px à esquerda, o elemento irá andar.

  <div class="relative">
    relative
  </div>

  .relative {
  position:relative;
  width:100px;
  height:100px;
  background:blue;
  left:20px;
  top:100px;
  }

  Se ficou alguma dúvida, é só falar!

Restou uma duvidasinha. Eu não entendi a diferença entre o position: relative e o position: absolute.

Obrigado pela atenção!!

A diferença é que, O position relative, se movimenta em relação a ele mesmo, ou seja, se eu definir um top de 10px ele ficará a 10px de onde ele estava anteriormente. Ja oposition: absolute se movimenta em relação ao elemento pai que possua um position: relative, ou seja, se eu definir um top de 10px, esse elemento vai ficar a 10px do topo do elemento pai que possuir um position: relative.

Muito obrigado Mateus, voce me ajudou muito. Muito obrigado pela atenção

Denada Livio! Qualquer dúvida só postar aqui no fórum que iremos te ajudar ;D