Atributos para camadas

- absolute indica que a posição da camada se calcula com relação ao ponto superior esquerdo da página.

Atributo top

Indica a distância em vertical onde será colocada a camada. Se o atributo position é absolute, top indica a distância da borda superior da camada com relação a borda superior da página. Se o atributo position era relative, top indica a distância desde onde se estava escrevendo nesse momento na página até a borda superior da camada.

Atributo left

Basicamente funciona igual ao atributo top, com a diferença que o atributo left indica a distância na horizontal a que estará situada a camada.

Atributo height

Serve para indicar o tamanho da camada na vertical, ou seja, sua altura.

Atributo width

Indica a largura da camada

Atributo visibility

Serve para indicar se a camada pode ser vista na página ou se permanece oculta ao usuário. Este atributo pode ter três valores.

- visible serve para indicar que a camada poderá ser vista.
- hidden indicará que a camada está oculta.
- inherit é o valor por padrão, que quer dizer que herda a visibilidade da camada onde está colocada a camada em questão. Se a camada não está colocada dentro de nenhuma outra se supõem que está colocada na camada do documento, que é toda a página e que sempre está visível.

Atributo z-index

Serve para indicar a posição sobre o eixo que terão as distintas camadas da página. Com outras palavras, com z-index podemos dizer quais camadas serão vistas em cima ou embaixo de outras, no caso de que estejam sobrepostas. O atributo z-index toma valores numéricos e a mayor z-index, mais em cima será vista na página.

Atributo clip

É um atributo um pouco difícil de explicar. Em concreto serve para recortar determinadas áreas da camada e que não podem ser vistas. Uma camada que está visível se pode recortar para ser vista, mas não será visto nenhum pedaço desta. O cliping se indica por meio de 4 valores, com esta sintaxe.

rect (<top>, <right>, <bottom>, <left>)

Os valores <top>, <right>, <bottom> y <left> indicam distâncias que se podem neste esquema.


Este é um exemplo de camada que utiliza todos os atributos que vimos neste artigo e em algum mais para aplicar estilo à camada.

<div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left: 10px; top: 220px; position: absolute; visibility: visible; z-index:10; font-size: 14pt; font-family: verdana; text-align: center; background-color: #bbbbbb">

Esta camada tem um cliping, por isso se vê entrecortada.
<br>
<br>
Isto é uma camada de prova

</div>

Pode ser visto o exemplo em uma página web, onde também poderá ser apreciado o efeito conseguido ao realizar o cliping.