Você pode determinar o tipo de posicionamento para uma área ou elemento. Para isso, é utilizada a propriedade position. Esta propriedade indica como um elemento deve ser posicionado. No total, existem quatro variantes de posicionamento disponíveis.
• static – nenhum posicionamento especial é realizado e segue o fluxo normal do texto.
• relative – ocorre um posicionamento relativo, baseado na posição normal ou inicial do elemento.
• absolute – ocorre um posicionamento absoluto pelas propriedades top, bottom, left e right. Elementos posicionados absolutamente estão fora do fluxo normal do texto. A posição absoluta é calculada em relação às margens do elemento pai (mas apenas se este não possuir a propriedade position: static).
• fixed – o elemento é posicionado de forma absoluta. Enquanto rola, o elemento permanece fixo.
As duas primeiras variantes permitem um posicionamento variável. Aqui, os elementos são posicionados em relação um ao outro. Os dois exemplos a seguir mostram como esse tipo de posicionamento poderia ser feito:
• O Elemento 2 é posicionado deslocado em 30 pixels em relação ao Elemento 1.
• O Elemento 2 é posicionado atrás do Elemento 1.
É diferente com fixed e static. Com estes, os elementos podem ser posicionados em locais muito específicos. As instruções de posicionamento referem-se ao elemento pai ou à janela do navegador. Um exemplo disso:
• O Elemento 1 é posicionado exatamente a 30 pixels da margem direita e a 20 pixels da margem superior da janela do navegador.
A seguir, as diferentes variantes de posicionamento são detalhadamente apresentadas. No entanto, antes um aviso: No contexto de posicionar elementos, o chamado Float é importante. Este importante princípio de CSS será abordado mais detalhadamente no próximo tutorial. Basicamente, o Float trata de como os elementos do site fluem no documento. Os elementos são pressionados o máximo possível na direção correspondente. Através do tipo de posicionamento, é possível determinar explicitamente o fluxo dos elementos.
O posicionamento relativo
Através do uso do posicionamento relativo com position: relative, duas coisas acontecem:
• A caixa é movida para fora de seu fluxo normal.
• O posicionamento original do elemento é reservado.
Ao reservar o posicionamento original, os outros elementos se comportam como se o elemento ainda estivesse no lugar.
Um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Caixa 1</div>
<div>Caixa 2</div>
<div>Caixa 3</div>
</body>
</html>
Aqui três caixas foram definidas.
As duas caixas 2 e 3 não receberam nenhuma instrução de posicionamento. Portanto, seguem o fluxo normal do documento. A Caixa 1, por outro lado, foi posicionada de forma relativa. Isso significa que as Caixas 2 e 3 são completamente independentes da Caixa 1. O espaço ocupado pela Caixa 1 não é afetado por essas caixas. Através das instruções top, bottom, left e right, as caixas são posicionadas. No posicionamento relativo, a posição inicial no fluxo do documento é considerada.
• top: 25px – a caixa é deslocada para baixo em 25 pixels. Assim, 25 pixels são inseridos acima da posição normal da caixa.
• right: 25px – a caixa é deslocada para a esquerda em 25 pixels. Assim, 25 pixels são inseridos à direita da posição normal da caixa.
As medidas em pixels são relativas à posição original. As instruções determinam onde o valor é inserido, ou seja, acima e à direita. Este aspecto é crucial. As instruções não determinam para onde a caixa deve ser movida.
O posicionamento absoluto
Continuando com o posicionamento absoluto. Este tipo de posicionamento retira completamente o elemento do fluxo. Os outros elementos na página se comportam como se o elemento não existisse de forma alguma.
Um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Caixa 1</div>
<div>Caixa 2</div>
<div>Caixa 3</div>
</body>
</html>
Aqui também foram definidas três caixas. A Caixa 1 está posicionada absolutamente.
Ao contrário do posicionamento relativo, para a Caixa 1 nenhum espaço é reservado. As caixas 2 e 3 deslocam-se para cima.
As instruções de posicionamento top, right, bottom ou left agora não mais se referem à posição original da caixa no fluxo. Em vez disso, referem-se ao próximo elemento circundante que foi posicionado de forma relative, absolute ou fixed. Se não houver nenhum elemento circundante, o posicionamento é relativo ao elemento pai de mais alto nível na árvore do documento, ou seja, ao html.
Uma posição fixa com fixed
Com position: fixed é possível fixar elementos. Também aqui um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Efeito de fragmentação Parte 1</div>
<p>Por um curto período de tempo, o mais recente tutorial ou vídeo-treinamento está disponível para visualização online ou o conteúdo da categoria de download está livre de pontos. Saiba mais aqui ...</p>
</body>
</html>A caixa fixa não rola, mas permanece sempre na posição atribuída a ela.
Para caixas fixas, o elemento circundante é sempre a janela do navegador.
Por favor, observe que, especialmente no contexto da fixação de elementos em navegadores mais antigos, surgem problemas significativos. Por exemplo, o IE6 não faz aquilo para o qual foi projetado. Para quem deseja/must otimizar seus sites também para este navegador, agora tem duas opções:
• Abster-se de caixas fixas.
• Utilizar hacks para o IE.
Se desejarem utilizar um hack, recomendo a página http://thestyleworks.de/tut-art/iewinfixed.shtml. Ali é demonstrado como criar caixas fixas mesmo para este navegador através de um pequeno script JavaScript.
