Faça Sua Pesquisa.

segunda-feira, 20 de fevereiro de 2012

Css >> Posicionamento


Segue abaixo lista de atributos css usados para posicionar os elementos html de uma página.
position: Define a posição de um elemento como estática, relativa, absoluta ou fixa.
Quando a posição é definida como estática "static" o elemento será posicionado normalmente na tela (propriedade padrão de todos elementos).
Quando a posição é definida como relativa "relative" o elemento será posicionado relativo a sua posição padrão na tela.
Quando a posição é definida como absoluta "absolute" o elemento será posicionado relativo ao elemento mais externo que tenha o seu posicionamento diferente de estático "static" (geralmente este elemento é inexixtente logo o elemento é posicionado relativo ao canto superior esquerdo da página)
Obs: Em geral apenas definir o "position" de um elmento não é o suficiente para posiciona-lo corretamente na página, para tal fazemos o uso conjunto das propriedades "top", "right", "bottom" e "left".
Valores: "static", "relative" e "absolute"
Uso: "position: absolute;
top: Define a distância ao topo do elemento em relação ao elemento que o contém. Esta propriedade deve ser usada em conjunto com a propriedade "position" para funcionar corretamente.
Valores: Devemos informar um valor numérico seguido de px (Ex: "1px").
Uso: "top: 5px;"
right: Define a distância à direita do elemento em relação ao elemento que o contém. Esta propriedade deve ser usada em conjunto com a propriedade "position" para funcionar corretamente.
Valores: Devemos informar um valor numérico seguido de px (Ex: "1px").
Uso: "right: 5px;"
bottom: Define a distância à baixo do elemento em relação ao elemento que o contém. Esta propriedade deve ser usada em conjunto com a propriedade "position" para funcionar corretamente.
Valores: Devemos informar um valor numérico seguido de px (Ex: "1px").
Uso: "bottom: 5px;"
left: Define a distância à esquerda do elemento em relação ao elemento que o contém. Esta propriedade deve ser usada em conjunto com a propriedade "position" para funcionar corretamente.
Valores: Devemos informar um valor numérico seguido de px (Ex: "1px").
Uso: "left: 5px;"
z-index: Define a ordem de apresentação (quem ficará na frente e quem ficará atras) de um elemento quando há sobreposição de elementos (2 imagens posicionadas com "position: absolute;" em "top: 0px;" e "left: 0px;"
Valores: Utilize um valor numérico para definir esta propriedade. (Ex: "1")
Uso: "z-index: 1;"
Exercício:
Utilizando apenas a tag html <div> ... </div> faça a página abaixo:

Utilizando as propriedades CSS e apenas a tag html <div></div>, faça o exercício abaixo:

0 comentários:

Postar um comentário

TecCodigos Copyright © 2011 | Template created by O Pregador | Powered by Blogger