Oi Allan,

Para entender o conceito do position é necessário primeiro entender que existe uma hierarquia de elementos dentro do DOM.

Cada elemento na tela tem um posicionamento especifico, o padrão é static, ele não se posiciona de maneira muito especial, é o comportamento padrão dos elementos.

relative

relative tem o mesmo comportamento do static, porém com propriedades extras como top, bottom, left e right.

O elemento passa a se comportar de maneira relativa aos elementos em sua volta, permitindo que você desloque o elemento na tela usando as propriedades descritas.

fixed

Este position se comporta de maneira relativa ao viewport (área visível do site) sempre se mantendo fixo onde for colocado.

absolute

O position absolute tem comportamento semelhante ao position fixed porém a referência para o posicionamento é o elemento relative mais próximo de onde o elemento está contido.

Ou seja, caso eu tenha uma div com a class .wrapper e essa div estiver ciom posicionamento relativo, com width e height setados e dentro dessa div outra div com posicionamento aboluto ela vai se manter dentro deste elemento até que sejam usados valores negativos na s propriedades top, bottom, e etc.

Se não consegui elucidar suas dúvidas com o texto posso deixar alguns exemplos.

Muito obrigado! Eu entendi de forma geral.. Mas, queria que você mandasse os exemplos, se possível.

Só para ter certeza mesmo,

Não sei se eu marcar como solução você verá a mensagem, então por vier das dúvidas, vou assim.

Obrigado!

Vou complementar o que o colega falou com as imagens

http://www.pixelstech.net/article/images/image5.jpg

https://i.ytimg.com/vi/ngt-qQKaTpA/maxresdefault.jpg

Para entender melhor ainda, vou complementar o que o amigo falou.

Imagine que você tem um andaime. E ele tem 3 andares. Em cada andar desse andaime você vai colocar uma tábua para o pessoal poder subir

________________________
|
|

|
|

O que acontece? Imagine ele como divs e você atribuiu a tábua mais acima, nenhuma classe, logo, ela é static

A diferença da staticé que ela não consegue se localizar quando a gente aplica as propriedades CSS top, left,right ou bottom por que ela não sabe aonde está, ela só entrou e ficou ali.

Agora colocamos a segunda tábua:

________________________
|
_______________________
|
//é aqui onde ela deveria ficar
|
|

Essa tábua ficou no lugar errado, eu gostaria que ela ficasse mais embaixo, só que ela está estática, então não posso mexer nela com qualquer propriedade de top, left,right ou bottom. O que eu faço? Aplico a propriedade position:relative e agora ela sabe aonde está, assim eu fico liberado pra usar top, left,right ou bottom. E eu peço pra ela descer um pouco top: 50px e ela fica assim:

________________________
|
|
_______________________
|
|

Agora eu adiciono a última

________________________
|
|
_______________________
|
|
________________________

Só que por acidente, eu coloquei a propriedade position:absolute nela e aconteceu isso:

________________________
|
|
_______________________
________________________ // esta é a tabua que estava la em baixo
|
|

Ela foi parar lá no topo. Isso por que a propriedade absolute tem como referência a borda do navegador, não do elemento que ele está contido. Como assim?

Isso quer dizer que a tábua de baixo não respeita mais que tem uma tábua acima dela e vai lá pro topo do andar.

O position absolute tem essa característica de não respeitar os elementos que não tem posição definida.

Ele só não subiu lá para o primeiro andar, por que o segundo tem o posittion relative definido, mas se eu tirar o position relative dele:

________________________ // esta é a tabua que estava la em baixo
________________________
|
_______________________
|

|
|

Tentar terminar agora: O position absolute não respeita o posicionamentos dos pais que estão com valor static. Por isso ele vai levar em consideração apenas o elemento com posição definida mais alto na árvore para parar

Faça o seguinte, aplique o seguinte código no seu editor de texto e execute:

<div class="quadrado1"></div>
<div class="quadrado2"></div>
<div class="quadrado3"></div>

E CSS

.quadrado1{
  width: 450px;
  height: 300px;
  background-color: red;
}

.quadrado2{
  width: 400px;
  height: 300px;
  background-color: green;
}
.quadrado3{
  width: 350px;
  height: 300px;
  background-color: blue;
}

Agora você vai ver que um fica acima do outro. Agora adicione position: absolute ou quadrado3 e você vai ver que ele pula pra cima de todo mundo.

Por fim, adicione a classe: position:relative ao quadrado 2 e vai ver que agora o absolute respeita o quadrado2

Poxa, essa foi grande hahahah

Espero ter ajudado!

Seguem os exemplos

static

<style>
  body {
    background-color: #34495e;
  }

  #box {
    width: 400px;
    height: 150px;
    background-color: #f1c40f;
    position: static; /* posicionamento padrão */
  }
</style>

<div id="box"></div>

relative

<style>
  body {
    background-color: #34495e;
  }

  #box {
    width: 400px;
    height: 150px;
    background-color: #f1c40f;
    position: relative;
    top: 50px;
    left: 50px;
  }
</style>

<div id="box"></div>

fixed

<style>
  body {
    background-color: #34495e;
  }

  #box {
    width: 400px;
    height: 150px;
    background-color: #f1c40f;
    position: fixed;

    /* elemento sempre fixo nessa posição */
    right: 50px;
    top: 50px;
  }
</style>

<div id="box"></div>

absolute

<style>
  body {
    background-color: #34495e;
  }

  #another-box {
    width: 400px;
    height: 150px;
    background-color: #e74c3c;
    position: absolute;
    right: -15px;
    bottom: 0;
  }

  #box {
    width: 400px;
    height: 150px;
    background-color: #f1c40f;
    position: absolute;
    right: -15px;
    bottom: 0;
  }

  #wrapper {
    width: 800px;
    height: 250px;
    background-color: #2ecc71;
    position: relative;
  }
</style>


<div id="wrapper">
  <div id="box"></div>
</div>

<div id="another-box"></div>