Como usar "position".

Oi, Wilber, tudo bem?

• 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!