Posicionamento de elementos
aprendendo a desenhar com a propriedade position
Agenda
Position
www.vainaweb.com.br
Posicionando elementos
Já aprendemos sobre tamanho, preenchimento, espaçamento, e agora vamos aprender como posicionar elementos
Static
www.vainaweb.com.br
O valor padrão dessa propriedade, e que podemos mudar, é o static.
Static
www.vainaweb.com.br
O elemento tem valor estático, ele não tem ainda uma posição definida.
Fixed
www.vainaweb.com.br
O valor fixed, como o próprio nome sugere se posiciona de forma fixa na página, isso significa que ele sempre ficará no mesmo lugar ainda que rolemos a página.
Relative
www.vainaweb.com.br
Posiciona o elemento em relação a si mesmo, e faz esse cálculo a partir do seu canto superior esquerdo.
Absolute
www.vainaweb.com.br
Se posiciona em relação a outros elementos, como seu elemento pai, ou, se o elemento pai não tiver seu position definido, ele usa como referencia o próprio body da página.
Top, left, right, bottom
www.vainaweb.com.br
Você pode imaginar que no navegador, há um sistema de coordenadas.
top
bottom
left
right
Top, left, right, bottom
www.vainaweb.com.br
Temos que adicionar propriedades extras junto ao position para posicionar o elemento nesse sistema.
Top, left, right, bottom
Temos que adicionar propriedades extras junto ao position para posicionar o elemento nesse sistema.
Top, left, right, bottom
Temos que adicionar propriedades extras junto ao position para posicionar o elemento nesse sistema.