Entendendo
Style Sheets - Parte 5
Utilização
de Layers
Comandos:
• position,
left, top
• width
• z-index
Vamos verificar agora a maior
dentre as inovações introduzidas em Style Sheets: a utilização
de layers. Sabemos que posicionamento utilizando o tradicional código
html é algo delicado. Mesmo com a utilização de
tabelas, certas vezes alguns problemas de posicionamento e alinhamento podem
quebrar a cabeça do mais experiente programador. Style Sheets chegou
para acabar com essas limitações, como veremos a seguir.
Nota: Por terem sido criados
posteriormente, os comandos Style Sheets para posicionamento e layers
não podem ser visualizados com o Internet Explorer 3.
position,
left, top
Este são os comando
CSS utilizados para posicionar os elementos na página html.
O comando left determina a distância entre
o elemento e a margem esquerda da página. O Comando top
determina a distância até a parte superior da mesma.
Podemos utilizar valores
de percentagem ou unidades de medida para determinar a posição
do elemento através desses comandos. As unidades que podem ser utilizadas
são as mesmas apresentadas anteriormente neste tutorial.
O comando position
determina se o posicionamento dos elementos será absoluto ou
relativo. Posicionamento absoluto significa que cada elemento terá
sua posição determinada individualmente, através de coordenadas.
Já no posicionamento relativo temos a posição de cada
elemento determinada em relação aos outros.
Qualquer elemento pode ter
sua posição determinada em Style Sheets: imagens, vídeos,
párarafos ou uma única letra.
.exemplo1
{position: absolute; left: 200px; top: 100px}
Clique para ver um exemplo
de posicionamento absoluto.
<IMG STYLE="position:
relative; left: 10px; top: 10px>
Clique para ver um exemplo
de posicionamento relativo.
width
Determina largura. Esse
comando só pode ser aplicado a elementos com posicionamento absoluto
em uma página. O tamanho pode ser especificado em valores de percentagem
ou unidades de medida.
.exemplo3
{ position: absolute; left: 30%; top: 100px; width:200px }
Clique para ver um exemplo
da aplicação do comando width.
z-index
Através do posicionamento
absoluto, podemos sobrepor vários elementos. O comando z-index,
por sua vez, permite definir em que ordem eles serão visualizados.
Neste exemplo posicionamos
os layers aparecem na ordem em que foram dispostos:
.layer1 {
color: yellow; position: absolute; left: 210px; top: 110px }
.layer2 {
color: blue; position: absolute; left: 220px; top: 120px }
.layer3 {
color: green; position: absolute; left: 230px; top: 130px }
.layer4 {
color: red; position: absolute; left: 240px; top: 140px }
Clique aqui
para ver o resultado.
Com o comando z-index
podemos alterar a ordem em que os layers aparecem dispostos:
.layer1 {
color: yellow; position: absolute; left: 210px; top: 110px; z-index: 4 }
.layer2 {
color: blue; position: absolute; left: 220px; top: 120px; z-index: 3 }
.layer3 {
color: green; position: absolute; left: 230px; top: 130px; z-index: 1 }
.layer4 {
color: red; position: absolute; left: 240px; top: 140px; z-index: 2 }
O comando z-index pode ser
aplicado tanto a elementos com posicionamento absoluto quanto relativo. Quanto
maior o valor, mais para cima o layer aparecerá. Clique aqui
para ver o resultado
...
Os comandos apresentados
neste tutorial fazem parte das especificações para CSS1 do World
Wide Web Consortium. Uma segunda versão já está aprovada.
A próxima geração de browsers deverá estar capacitada
a visualizar páginas elaboradas com CSS2.
Observação:
Este tutorial é apenas introdutório. Alguns comandos foram excluídos
em razão de serem aceitos apenas pelo Netscape Comunicator, ou apenas
pelo Internet Explorer 4.
Dúvidas, sugestões,
críticas, escreva para zaz@zaz.com.br
