Usando o elemento POSITION no CSS

Neste post, vamos aprender a diferença pois quem está começando com CSS não sabe muito bem como se usa o elemento POSITION. 

O elemento position existem 4 atributos, abaixo irei passar quais são e explicando sua funcionalidade ,vamos lá:

1 - #div1 {position: static}

Esse é o valor default para todo elemento HTML, o que significa que o elemento não tem posicionamento definido e seu fluxo ocorre normalmente no documento HTML

2 - #div1 {position: fixed}

Posiciona um elemento fixadamente na página em relação a janela, ou seja, independente de a pagina conter um scroll ou não, o elemento sempre ficará visíve ao usuário em relação as medidas definidas. Vale lembrar que esse tipo de posicionamento não funciona no Internet Explorer.

3 - #div1 {position: relative}

Especificando position:relative agora você pode utilizar top ou bottom, right ou left para posicionar os elementos na página em relação ao lugar que ele ocuparia no fluxo do documento.

4 - #div1 {position: absolute}

 se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.

Acima coloquei uma explicação de todos os seus atributos, agora só você testar e ver na prática suas funcionalidades, espero que esse post ajudem, pois vejo no dia a dia que muitas pessoas que estão começando no desenvolvimento web não sabem usar ou para que serve. 

Abraços.