CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte XI) vamos mostrar como fazer o posicionamento absoluto e relativo das caixas de conteúdo em CSS, utilizando métodos diferentes.

CSS

Não perca os artigos anteriores desta série:

3. EMPILHAMENTO DE CAIXAS DE CONTEÚDO

A mudança do posicionamento standard estático ao atribuir o valor absolute á propriedade position permite que os elementos se sobreponham, criando empilhamento de conteúdo – este empilhamento irá ser feito de acordo com a ordem com que aparecem no código HTML. No entanto a ordem de empilhamento dos conteúdos pode ser determinada através do CSS ao atribuir um valor inteiro à propriedade z-index de cada elemento. Assim, o elemento que tiver o valor de z-index mais alto é o que fica no topo, o elemento com o segundo valor mais alto fica por baixo, e continuará por esta ordem até ao último elemento.

O posicionamento absoluto permite que a posição dos elementos seja controlada em 3 dimensões utilizando as coordenadas XYZ. As coordenadas relativamente ao X são controladas utilizando as propriedades de offset left e right, as coordenadas relativamente ao Y são controladas utilizando as propriedades de offset top e bottom, e relativamente ao Z utilizamos o z-index para determinar a ordem de empilhamento do conteúdo.

Observe a imagem para ter uma imagem mais clara sobre aquilo que estamos a falar:

Programação CSS para iniciantes (Parte XI)

De seguida vamos praticar aquilo que estivemos a abordar acima. Nada melhor que praticar, certo?

Crie um documento HTML e insira o seguinte código dentro da tag <body> para começar a criar o documento:

<div id="muitoclaro"></div>
<div id="claro"></div>
<div id="normal"></div>
<div id="texto">O conteúdo desta caixa irá estar sobreposto sobre as outras caixas, criando assim um efeito de sombra nesta caixa.</div>

Guarde o documento HTML e crie um documento CSS. Linke-o ao documento HTML e insira o seguinte código para determinar a altura e largura das caixas de conteúdo:
```
div {width: 350px; height: 60px }
```
Agora vamos estilizar cada uma das caixas de conteúdo. Como queremos um efeito sombra, vamos usar varias tons da mesma cor para criar esse efeito. Primeiro vamos começar por definir a caixa que fica no topo:
```
div#texto {position:absolute; top: 20px; left: 20px; background: red; z-index:4}
```

Estilizamos a caixa seguinte:

div#normal{position:absolute; top: 24px; left: 24px; background: #666; z-index: 3}

Estilizamos a terceira caixa:

div#claro{position:absolute; top: 28px; left: 28px; background: #999; z-index: 2}

E por fim estilizamos a última caixa:

div#muitoclaro {position:absolute; top: 32px; left: 32px; background: #CCC; z-index: 1}

Guarde ambos os documentos e observe o resultado:

Caso não tenha reparado, no HTML posicionamos a caixa que obteve a cor mais clara em primeiro lugar no código, e deveria ser a primeira a aparecer. No entanto com a utilização do z-index no CSS, alterámos a ordem das caixas para aquilo que pretendíamos e obtivemos o resultado acima.

De notar que neste tutorial foi utilizado um offset de 4px – utilizar um offset mais pequeno cria um efeito mais realístico da sombra na caixa, como poderá confirmar abaixo, onde utilizámos um offset de 1px:

4. POSICIONAMENTO RELATIVO DE CAIXAS

Ao contrário do posicionamento absoluto que altera completamente o elemento do esquema normal do layout, o posicionamento relativo apenas ajusta a posição do elemento relativamente à posição que de início iria ocupar no layout do documento. Então, alterar o posicionamento do estático para relativo utilizando a propriedade CSS property permite que o elemento seja reposicionado a partir da sua posição inicial, utilizando as propiedades de offset top, right, bottom e left.

Se você especificar um valor top de -50px, o elemento irá mover-se para cima e se especificar um valor left de 50px o elemento irá mover-se para a direita, no entanto o espaço que ocupava na sua posição original permanece intacto. Ao determinar estes valores de posicionamento relativo a um elemento span dentro de um parágrafo cria um efeito que poderá ser utilizado das mais variadíssimas formas.

Vamos utilizar o exemplo do ponto 3 deste tutorial, em que criámos um efeito de sombra para uma caixa de conteúdo utilizando outras caixas de conteúdo e o empilhamento das mesmas. No entanto neste exemplo ao invés de utilizarmos o posicionamento absoluto, vamos utilizar o posicionamento relativo.

Crie um documento HTML e insira o seguinte código dentro da tag <body> para começar a criar o documento:

<div id="muitoclaro">
	<div id="claro">
		<div id="normal">
			<div id="texto">O conteúdo desta caixa irá estar sobreposto sobre as outras caixas, criando assim um efeito de sombra nesta caixa>
            </div>
		</div>
    </div>
</div>

Guarde o documento HTML e crie um documento CSS. Linke-o ao documento HTML e insira o seguinte código para determinar a altura e largura das caixa de conteúdo sobre a qual as outras caixas de irão posicionar de forma relativa, que será a caixa de conteúdo que ficará no fundo do empilhamento:
```
div#muitoclaro {width: 350px; height: 60px; background: #CCC; margin: 60px}
```
Vamos agora posicionar o primeiro elemento relativo ao elemento posicionado inicialmente:
```
div#claro{position:relative; top: -5px; left: -5px; height: 100%; background: #999}
```

Estilizamos o elemento seguinte:

div#normal{position:relative; top: -5px; left: -5px; height: 100%; background: #666}

E por último estilizamos o elemento que ficará no topo do empilhamento, que contém o texto:
```
div#texto {position:relative; top: -5px; left: -5px; height: 100%; background: red}
```
Guarde ambos os documentos e observe o resultado:

O efeito visual é igual utilizando o posicionamento absoluto ou posicionamento relativo, no entanto a nossa opinião é que neste caso o posicionamento relativo torna-se mais útil por facilitar um pouco o trabalho. Basta posicionar um elemento e a partir daí posicionar os restantes elementos relativamente ao elemento inicial. Uma vez mais relembramos que neste tutorial foi utilizado um offset de 5px – utilizar um offset mais pequeno cria um efeito mais realístico da sombra na caixa, como poderá confirmar abaixo, onde utilizámos um offset de 1.5px:

Programação CSS para iniciantes (Parte XI)

A propriedade margin apenas é aplicada ao elemento original pois os restantes elementos são posicionados relativamente e ele, não necessitando de uma magem definida para se afastar dos limites do navegador.

Não perca os próximo artigos sobre CSS!

Abraço!

Comentários dos Alunos

Gilmar Coimbra
29 de Maio de 2012

Parabéns, uma vez mais, pelas excelentes postagens!
(Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

Obrigado.
Responder