Seção extra baseada na documentação da W3C: https://www.w3schools.com/cssref/pr_class_position.asp.
O atributo position representa o tipo de posicionamento que será utilizado para os elementos.
Existem 5 valores possíveis:
Ao definir uma position, podemos utilizar os atributos left, right, bottom e top para posicionar o item conforme seus lados.
Posicionamento padrão do HTML. Este posicionamento anula ao atributos left, right, bottom e top.
O elemento é posicionado seguindo a ordem de definição padrão da página.
div {
position: static;
background-color: red;
width: 100px;
height: 100px;
}
Este posicionamento segue também a ordem de definição padrão da página, porém ele permite o uso das propriedades left, right, bottom e top.
div {
position: relative;
background-color: red;
width: 100px;
height: 100px;
left: 10px; /* Irá deslocar o item com static acima 10px para a direita */
bottom: 30px; /* Irá deslocar o item acima 30px para cima */
}
O fixed posiciona um item relativo a viewport, ou seja, a área de visão do usuário. Isto faz com o que o elemento esteja sempre visível em tela e sempre na mesma posição, mesmo que a página possua uma rolagem infinita para baixo.