CSS: Propriedade Position
Com posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats, o posicionamento abre muitas possibilidades para criação de layouts avançados
Publicado em: 3 de fevereiro de 2009 | Leituras: 5.364 |
Canal: CSS |
Autor: Redação Oficina da Net
Com posicionamento CSS podemos colocar um elemento em uma posição exata na página. Combinado com floats, o posicionamento abre muitas possibilidades para criação de layouts precisos e avançados.

O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas.
Vamos supor que queremos posicionar um cabeçalho. Usando o box model (ver lição 9) o cabeçalho pode ser estilizado para ser apresentado como mostrado abaixo:

Se quisermos o cabeçalho posicionado a 100px do topo do documento e a 200px à esquerda, podemos usar o seguinte CSS:
O resultado é:

Como você pode ver, posicionar com CSS é uma técnica precisa para colocar elementos. É muito mais fácil do que usar tabelas, imagens transparentes e tudo mais.
Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página:
O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento:
Texto traduzido por: Maurício Samy Silva
O princípio de posicionamento CSS
Considere a janela do navegador como um sistema de coordenadas:
O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar na tela usando um sistema de coordenadas.
Vamos supor que queremos posicionar um cabeçalho. Usando o box model (ver lição 9) o cabeçalho pode ser estilizado para ser apresentado como mostrado abaixo:

Se quisermos o cabeçalho posicionado a 100px do topo do documento e a 200px à esquerda, podemos usar o seguinte CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}O resultado é:

Como você pode ver, posicionar com CSS é uma técnica precisa para colocar elementos. É muito mais fácil do que usar tabelas, imagens transparentes e tudo mais.
Posicionamento absoluto
Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que não deixa nenhum espaço vazio após ser posicionado.Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da página:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}Texto traduzido por: Maurício Samy Silva
Resposta em até 24 horas! (grátis)Dúvidas?
Autor da matéria
Últimas matérias escritas pelo autor:
|
Redação Oficina da Net A Redação do Oficina da Net é composta por todos os integrantes da equipe do portal. Estamos abertos a indicações de matérias, entre em contato conosco solicitando sua dúvida, ou acesse nosso fórum. |
Últimas matérias escritas pelo autor:
30/08 - Dicas de segurança para smartphones co...
27/08 - Eleições: redes sociais dão mostras de...
23/08 - 5 dicas para aumentar a proteção no e-...
12/08 - Web Analytics - Só números não bastam
09/08 - Google Android OS
09/08 - Business Intelligence: é estratégia ou...
06/08 - Os desafios de recursos humanos nas em...
05/08 - Neutralidade da rede o que é?
02/08 - Nota Fiscal Eletrônica: cumpra a lei e...
29/07 - Saiba como ter segurança na internet d...
26/07 - Cloud Computing redesenha modelo de ne...
26/07 - O sucesso depende de manter foco?
07/07 - Usabilidade de interfaces para EAD
07/07 - Dicas para deixar o Firefox mais rápid...
27/08 - Eleições: redes sociais dão mostras de...
23/08 - 5 dicas para aumentar a proteção no e-...
12/08 - Web Analytics - Só números não bastam
09/08 - Google Android OS
09/08 - Business Intelligence: é estratégia ou...
06/08 - Os desafios de recursos humanos nas em...
05/08 - Neutralidade da rede o que é?
02/08 - Nota Fiscal Eletrônica: cumpra a lei e...
29/07 - Saiba como ter segurança na internet d...
26/07 - Cloud Computing redesenha modelo de ne...
26/07 - O sucesso depende de manter foco?
07/07 - Usabilidade de interfaces para EAD
07/07 - Dicas para deixar o Firefox mais rápid...
Matérias relacionadas
Últimas matérias
Últimas notícias







CSS Font-size: px, em, %, pt ou keyword?
O que você procura para sua vida profissional?
O planejamento agrega valor
E-mail marketing em 140 caracteres
Novos iPods, novo iOS, novo iTunes e nova Apple TV
Conheça as 100 primeiras cidades atendidas pelo Banda Larga ...
Linus Torvalds diz que mercado já se rendeu ao Linux