Já li sobre a propriedade position
, mas ainda não conseguir entender o proposito dela. Os valores absolute
e relative
não entraram na minha cabeça. Também queria saber quando eu devo utilizar essa propriedade.
-
2Da uma lida nesse link se puder: pt.stackoverflow.com/questions/38215/…, talvez ajude. Aliás, nela tem as respostas para a sua pergunta.– RaizantCommented 22/12/2016 às 21:43
1 Resposta
Existem quatro valores para a propriedade Position: Static, Relative, Fixed e Absolute
Static
O position: static; não tem por base as propriedades top, left, bottom ou right
, ele simplesmente fica no lugar onde você o colocou "estático" e acompanha no fluir normal da página.
Relative
O valor relative faz com que o elemento seja posicionado relativamente de acordo com o valor informado em top, left, bottom ou right
.
Ex.: se você configurar um elemento assim:
position: relative;
left: 10;
Ele ficará na posição normal no fluir da página acrescentado +10px de distância da lateral esquerda.
Fixed
Um elemento configurado com fixed
, ficará fixo na tela, não importando o quanto você desça a página para baixo. Quando você vê um site que tem um menu superior que fica sempre no topo, independente de você descer a barra de rolagem para baixo, provavelmente está marcado como position: fixed;
.
Absolute
O elemento com position: absolute; fica posicionado relativamente ao elemento "superior" a ele (caso esteja dentro de um outro elemento), ou relativamente ao body (caso não esteja dentro de outro elemento). Se você o configurar assim:
position: absolute;
left: 10;
top: 20;
Ele se manterá na posição "10, 20", e diferente do fixed, quando você descer o scroll da tela, ele irá se mover, mantendo sempre a posição absoluta em relação ao elemento "superior".
Caso ele esteja dentro de uma outra div, a posição "10, 20" que citei antes, seria referente à ela.
Ex: se a div pai estiver na posição "20, 30", a div absoluta estaria na "20, 50".