índice (CSS)
página anterior
Posicionamento Absoluto, continuação...
Relembrando: Fluxo é a forma como os elementos, em bloco ou inline são dispostos na página. Serão apresentados da forma que foram declarados dentro do documento xhtml.
-no posicionamento normal a div ocupa todo o espaço. Se houver texto ela aumentará a medida que este aumentar. Pode passar para outra linha dependendo do tamanho do texto. (nesse caso ele aumentará na vertical)
Na folha de estilo ficaria assim:#um{
position: absolute;
left:350px;
top: 220px;/*aceita valor negativo*/ padding:1px;
background-color: #F8F8F8; /*#B0E0E6 PowderBlue*/
font-size:16px;
}
(div dois)No posicionamento absoluto, há uma liberação de espaço para o próximo elemento ocupar.
depois com a liberação de espaço.Na folha de estilo ficaria assim:
#dois{
position: absolute;
left:420px;
top: 420px;
background-color:#E9C979;
}
obs: No posicionamento absoluto a posição do elemento será alterada de acordo com a posição do elemento pai.
Posicionamento Fixed
O posicionamento fixed não acompanha a rolagem. Ou seja permanece fixo no lugar que está.
A Propriedade Position
A propriedade position tem como finalidade colocar o elemento fora da posição original.
Para que a página fique da forma desejada é necessário dispor os elementos da forma correta. A css responsável por esta organização é a position com os valores: static, relative, absolute e fixed. São eles:
- Static
É o valor padrão para a propriedade. Se definirmos apenas a largura e a altura de duas divs, no navegador elas seguirão a ordem padrão dos elementos e uma ficará embaixo da outra.
- Relative
Aqui é possível alterar a distância da div em relação ao elemento pai. Pode-se utilizar right ou left, top ou bottom. Para posicionar um elemento de forma relativa, a propriedade position deve ser definida para relative. A diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado. O posicionamento para posição relativa é calculado com base na posição original do elemento no documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado. Como exemplo de posicionamento relativo serão posicionadas três imagens relativamente as suas posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais no documento:
- Absolute
O elemento fica posicionado absolutamente em relação ao elemento pai que não tenha a propriedade position definida como static. Pode ser posicionado em qualquer lugar. No código a seguir a segunda div foi definida como absolute precisando de um ponto de referência já que não pertence mais ao fluxo normal. Como ela não está dentro de outro elemento, pegará como última referência o elemento body (janela do navegador, ela está no top à esquerda). Como a esquerda foi definida com 4px de distância do elemento pai, ela ficará afastada do browser e também do topo com a mesma distância. Na folha de estilos ficaria assim:
<div style="width:450px; height:140px; background: #008B8B; position:absolute; top:4px; left:4px; padding:10px; font-size: 21px; color:#F5F5DC;">Esta é a segunda div e foi definida como absolute precisando de um ponto de referência já que não pertence mais ao fluxo normal. Como ela não está dentro de outro elemento, pegará como última referência o elemento body (janela do navegador, e foi parar no top à esquerda.</div>- position relative
No exemplo abaixo a segunda div, por estar dentro da primeira e esta ter o position:relative, na hora de se posicionar vai procurar os limites da primeira div. Por ter o mesmo tamanho da primeira div, mas estar distante 10px do topo, a segunda div fica em parte fora dos limites da primeira, mas sem alterar o tamanho dela. A conclusão é de que um elemento posicionado absolutamente não altera as dimensões do seu recipiente. Isso facilita bastante a criação de layouts.
No Html:
<div style="width:650px; height:150px; background:#F0E68C; position:relative; left:10px;" >
<div style="width:650px; height:150px; background: #FFA07A; position:absolute; top:10px; left:10px;" > </div >