Posicionando elementos em uma página da Web com a propriedade CSS Position

Pode 2, 2024

Antes das folhas de estilo em cascata, você tinha um controle limitado sobre a posição dos objetos em sua página da web. Você pode usar a tabela HTML para controlar um pouco o posicionamento, mas isso não foi muito preciso. Agora, com CSS, você pode ter um controle preciso sobre como cada elemento é colocado em sua página da web.

Antes de poder usar a propriedade CSS position para posicionar elementos em sua página da web, precisamos discutir a terminologia usada para se comunicar com o navegador da web. O CSS não apenas considera a largura e a altura da sua página, mas também as dimensões do navegador.

Largura e altura do navegador
No começo, você pode pensar que isso se refere à janela aberta do navegador. Mas realmente se refere a todo o navegador, incluindo os controles e botões.
Largura e altura ao vivo
Este é o termo para a área de exibição do navegador. Não inclui os controles.
Largura e altura do documento
Esta é toda a largura e altura da sua página da web. Se essas dimensões forem maiores que a largura e a altura ativas, o navegador exibirá as barras de rolagem conforme necessário.

Agora que você conhece os termos dos limites nos quais pode posicionar as partes da sua página da Web usando CSS, vamos dar uma olhada nos quatro valores de posição.

Estático
Esse é o padrão. A menos que você especifique o contrário para um elemento, o navegador usará o posicionamento estático. Assim como parece, com o posicionamento estático, você não pode reposicionar elementos na página da web. Então, como o navegador determina onde colocar cada objeto em sua página da web? Ele posiciona cada elemento na ordem em que eles ocorrem no seu código HTML. Se você tiver uma imagem de logotipo, uma saudação e o aviso de direitos autorais em seu HTML, o navegador os colocará na página da Web nessa ordem. Você não pode mover a saudação acima da imagem do logotipo.
Relativo
O posicionamento relativo funciona da mesma forma que estático, pois a ordem dos elementos no código HTML controla o fluxo dos elementos na página. No entanto, você pode usar o posicionamento relativo para controlar a posição de um elemento em relação aos outros elementos na página da web.
Absoluto
Quando você usa posicionamento absoluto com um elemento, isso o torna independente do restante da página da web. Como o posicionamento não é mais determinado pela ordem do HTML, você precisará usar as coordenadas X e Y para posicionar o elemento.
Fixo
Isso funciona da mesma forma que o posicionamento absoluto. No entanto, o elemento que possui posicionamento fixo não rolará com a página da web. Esse é um recurso interessante para usar em um logotipo ou menu que você deseja manter visível enquanto a página rola para cima.

Instruções De Vídeo: Curso de CSS - Aula 7 (Posicionamento de Elementos, Bordas e Z-Index) (Pode 2024).

Posicionando elementos em uma página da Web com a propriedade CSS Position, HTML, CSS, propriedade CSS position, posicionamento estático, posicionamento relativo, posicionamento absoluto, posicionamento fixo, como posicionar elementos em uma página da Web, use CSS para posicionar elementos em uma página da Web

Artigo Anterior

Próximo Artigo

API de desenho do Flash CS3, ActionScript 3, Classe de forma

Pode 2024

Uma das minhas coisas favoritas no Flash é atrair o palco. Mas não estou falando de desenho com as ferramentas de desenho do Flash, como a ferramenta Retângulo ou Oval. Neste tutorial, aprenderemos o...

computadores

A função Getdate do PHP

Pode 2024

Trabalhar com o tempo é uma tarefa frequente para a maioria dos programas PHP. Por exemplo, em um programa de carrinho de compras, você deseja armazenar a data e a hora de uma compra feita pelo seu...