CSS Posicionamento

Prévia do material em texto

CSS - Posicionamento
Msc Danillo Rocha.
Daw
Posicionamento
• Com CSS é possível alterar o fluxo normal de 
uma página e definir o posicionamento de 
cada elemento.
Posicionamento
• Todos os elementos têm a 
propriedade position que estabelece a forma 
de "cálculo" da posição de um elemento. 4 
alternativas:alternativas:
• static: 
– o elemento é posicionado segundo o fluxo 
normal. 
– Posiciona o elemento no fluxo normal da página e 
não permite ajustes externos.
Posicionamento static
• Corresponde ao posicionamento normal. 
• Segue a sequência definida no documento 
HTML.
• top, left, bottom, right: não se aplicam.• top, left, bottom, right: não se aplicam.
• Exemplo:
Posicionamento static
Posicionamento
• absolute: 
• Posiciona o elemento em qualquer local da 
página.
• Posição “relativa” às laterais da página ou ao • Posição “relativa” às laterais da página ou ao 
primeiro elemento posicionado (não static) no 
qual esteja contido.
• O espaço original do elemento é liberado para 
ocupação dos demais elementos.
Posicionamento absolute
• A posição do elemento é calculada em relação 
ao "pai".
Posicionamento absolute
Posicionamento
• relative:
• O elemento colocado em sua posição normal 
na página e, depois, é deslocado de acordo 
com os valores definidos, deixando vazio o com os valores definidos, deixando vazio o 
espaço onde ele ficaria.
Posicionamento relative
• A posição é calculada em relação à localização 
natural do elemento.
Posicionamento relative
Posicionamento relative
Posicionamento
• fixed:
– Posiciona o elemento relativo à janela do 
navegador e não move quando ocorre rolagem 
da páginada página
Posicionamento fixed
• Igual ao posicionamento absoluto, mas 
relativamente à janela (posição fixa, mesmo 
com a rolagem da barra
Posicionamento
• A propriedade position, é usada juntamente 
com:
– top: deslocamento do lado superior do elemento.
– left: deslocamento do lado esquerdo do – left: deslocamento do lado esquerdo do 
elemento.
– bottom: deslocamento do lado inferior do 
elemento.
– right: delocamento do lado direito do elemento.
Posicionamento
• A propriedade position, é usada juntamente 
com:
– width: largura do elemento.
– height: altura do elemento.– height: altura do elemento.
• As unidades podem ser:
– Fixas: pixels (px), points (pt), centímetros (cm), 
milímetros (mm).
– Relativas: em, percentagem (%)
Posicionamento
Posicionamento - Float
• A propriedade float permite desligar o 
elemento do fluxo normal e deslocá-lo para a 
esquerda ou direita da linha. O mais 
interessante é que o restante conteúdo pode interessante é que o restante conteúdo pode 
fluir paralemente ao elemento.
• Valores possíveis: none, left, right;
Posicionamento - Float
Posicionamento - Float
• Exemplo sem float:
Z-index
• Elementos posicionados (absolute, relative
ou fixed) podem ser colocados em 
camadas sobrepostas umas sobre as outras 
através da propriedade z-indexatravés da propriedade z-index
– Assim é possível definir que um elemento 
fique na frente ou atrás de outro.
Z-index
• O elemento que usa z-index não pode 
estar usando o posicionamento padrão 
(static).
• Quando maior o valor, mas à frente o • Quando maior o valor, mas à frente o 
elemento fica (mais “próximo da tela”).
Z-index
Exercícios 1
Exercício 2
• Aplicar o posicionamento relativo, absoluto e 
fixo.
• Alterar as dimensões dos elementos com as 
propriedades width e height.propriedades width e height.
• Alterar as dimensões dos elementos com as 
propriedades top, left, bottom e right .
Exercício 3
• Posicione os elementos em uma página 
conforme a imagem abaixo