No Manual de CSS de CriarWeb.com tratamos em vários pontos do posicionamento CSS, com as distintas técnicas para criar e colocar partes da página de maneira absolutamente precisa. Em todos os casos explicamos diversos detalhes desde diferentes enfoques que sem dúvida dão uma visão particular sobre o posicionamento de elementos na página web. Por exemplo, já falamos sobre o que são as camadas, e também os atributos para seu posicionamento, bem como de outros assuntos como a construção CSS.

No entanto, ficou faltando oferecer algumas explicações gerais e detalhadas sobre o posicionamento CSS, que podem dar aos leitores uma idéia global sobre este assunto tão interessante. Sem dúvida, é um tema que vale a pena ser estudado e também praticado. Neste artigo vamos oferecer diversos conhecimentos teóricos ao tempo que estamos preparando um vídeo no qual mostraremos na prática as várias opções para o posicionamento web.

Atributos para posicionamento CSS

Existem numerosos atributos para posicionar qualquer elemento da página com CSS. Além disso, à medida que vão sendo apresentadas novas versões de CSS, estes atributos e seus possíveis valores vão aumentando. Em CSS 2 contamos com diversos atributos que veremos a seguir.

Atributo position:
Este atributo é, digamos, o principal para definir o tipo de posicionamento de um elemento. Vale a pena vê-lo separadamente e em detalhes. Trataremos dele mais adiante em outro artigo, mas adiantamos que ele vai permitir vários valores para estabelecer como se posicionará o elemento na página e se fará parte do fluxo normal de HTML. Seus valores possíveis são absolute, fixed, relative,static e inherit

Atributos top, left, right, bottom:
Servem para indicar a posição de um elemento, quando ele tem os valores de position "absolute", "relative" ou "fixed" (em outros valores do atributo position estes atributos são ignorados). O atributo top indica a distância da margem superior da página e left da margem da esquerda. Também se pode indicar opcionalmente a posição com bottom que é a distância de baixo e right , que é a distância da direita.

Atributos float e clear:
Float serve para estabelecer que um elemento tem que "flutuar", colocando-se os valores "right" ou "left" para que flutuem à esquerda ou à direita. Como esclarecimento, os elementos flutuarem é algo assim como o que acontece quando definimos o atributo HTML align="right" ou align ="left nas imagens ou tabelas. Com o atributo clear fazemos com que o elemento se coloque na primeira área livre que tenha lugar onde se indique. Por exemplo, o valor de clear "right" faz com que o elemento se coloque em primeiro lugar onde não tenha nenhum elemento flutuando á direita. O valor de clear "both" faz com que o elemento se coloque onde não haja elementos flutuando, tanto à direita quanto à esquerda.

Atributo clip:
Estabelece uma área de recorte da porção visível de um elemento. Esta área de recorte se estabelece com vários valores, como detalhado no artigo atributos para camadas:

Atributo display:
Especifica o tipo de caixa que deve ter um elemento que pode ser de diversas formas. Este atributo também tem bastante utilização e entre os valores mais comuns poderíamos destacar: "none" que faz com que esta caixa ou elemento não apareça na página nem se reserve espaço para ela, "block" serve para que a caixa seja um bloco e se mostre em uma linha ou linhas independente de outros elementos da página,"inline", que indica que essa caixa tem que aparecer na mesma linha que outros elementos escritos antes ou depois.

Atributo overflow:
Este atributo serve para dizer o que acontece com os elementos que não cabem em uma caixa devido às dimensões da mesma e do conteúdo que tenha.

Atributo visibility:
Atributo para definir a visibilidade de um elemento. Com este atributo podemos dizer que certos elementos da página sejam visíveis ou invisíveis, mas atenção porque embora um elemento seja invisível, continua ocupando espaço na página. Se quisermos que não seja invisível e nem se reserve espaço na página, há que se utilizar o atributo display com o valor "none".Os valores mais comuns de visibility são: "visible", que faz com que o elemento se veja (valor por defeito) e "hidden", que faz com que o elemento seja invisível, embora continue ocupando espaço.

Atributo z-index:
Este atributo tem como valor qualquer número inteiro. Serve para indicar que camada se tem que ver por cima ou por baixo de outra ou outras , no caso de várias camadas estarem superpostas. Com maiores valores de z-index, a camada se coloca mais à frente, cobrindo outras camadas que tenham valores menores que z-index.

Esta foi uma revisão geral dos distintos atributos de folhas de estilo que estão implicados no que se conhece como posicionamento em CSS. Como referência, aos interessados, recomendamos a leitura dos artigos mencionados no começo do Manual de CSS, especialmente o artigo sobre atributos para camadas.

No seguinte artigo veremos vários casos de utilização do atributo position, que é a chave para entender o posicionamento CSS.