CSS - Manual de Estilo (parte 3)

juliaojunior

Veremos como facilitar o código, tornando-o mais legível. Aspectos avançados de posicionamento de objetos também serão vistos em detalhes.

[ Hits: 20.169 ]

Por: Juliao Junior em 18/03/2010

0 0

Denuncie Favoritos Indicar Impressora

Posicionamento

As propriedades de posicionamento em CSS no permitem posicionar um elemento na página da forma que desejarmos. Além disso, podemos colocar um elemento por trás do outro, especificando o que deve acontecer quando um elemento é muito grande.

Para posicionar os elementos, podemos usar como referência as propriedades de posição superior, inferior, esquerda e direita. Porém, tais propriedades só funcionam se a propriedade position estiver ativa. Também devemos lembrar que cada propriedade funciona de forma diferente dependendo do método de posicionamento.

Em CSS, temos quatro métodos de posicionamento.

Estático

Por padrão, os elementos HTML possuem este tipo de posicionamento, estático. Um elemento com posicionamento estático sempre é colocado seguindo o fluxo normal da página.

Elementos estáticos não são afetados pelas propriedades de posicionamento superior, inferior, esquerda e direita.

Fixo

Um elemento 'fixo' será posicionado relativamente à janela do navegador. Ele não sairá do lugar mesmo que a janela seja rolada. Veja um exemplo:

p.pos_fixed
{
   position:fixed;
   top:30px;
   right:5px;
}

Neste caso, os elementos não seguem o fluxo normal da página. Todos os demais elementos não tomam conhecimento da existência de um elemento fixo. Ou seja, seguem se posicionando como se o elemento fixo não existisse. Claro que os elementos fixo podem, inclusive, sobrepor outros elementos da página.

Relativo

Este tipo de posicionamento usa a posição que seria a 'normal' do elemento no fluxo da página. O elemento é posicionado 'relativamente' à posição normal. Por exemplo:

h2.pos_left
{
   position:relative;
   left:-20px;
}
h2.pos_right
{
   position:relative;
   left:20px;
}

Um ponto interessante é que elementos com tal posicionamento podem sobrepor outros elementos, mas seu espaço reservado no fluxo normal da página ainda está lá. É comum que elementos com posicionamento relativo sejam usados para gerar blocos que contém elementos com 'posicionamento absoluto', nosso próximo subtítulo.

Absoluto

Quando tem posicionamento absoluto, o elemento é posicionado relativamente ao primeiro elemento 'superior' do fluxo que tenha posicionamento estático. Se não houver nenhum desses elementos, o elemento referido fica sendo o <html>. Veja o exemplo abaixo.

h2
{
   position:absolute;
   left:100px;
   top:150px;
}

Este posicionamento também tira o elemento do fluxo normal da página. Os demais elementos também não tomam conhecimento de sua existência. Mas eles ainda podem sobrepor outros elementos da página.

Falamos muito sobre elementos 'sobrepondo' outros. Como isso acontece?

Página anterior Próxima página

Páginas do artigo

   1. Agrupamento e código mais limpo
   2. Exibição
   3. Posicionamento
   4. Sobreposição

Outros artigos deste autor

Octave - Programação científica no Linux (parte 2)

APT - Fantástico gerenciador de pacotes

Processing - Interagindo com o usuário

Convertendo formatos de vídeo/áudio

Reconstructor: Crie seu próprio Linux liveCD

Leitura recomendada

CSS - Manual básico sobre estilo

Criando JPG animado com o JpegAnim