4

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.

1

1 Resposta 1

4

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".

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .