slides posicionamento css

POSICIONAMENTO COM CSSBrenda da Custa

João MarceloJosafá de Castro

Paula JanainaRaimundo de Castro Soares

As propriedades de posicionamento CSS permitem que você posicione um elemento. Ele também pode colocar um elemento atrás de outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande. Os elementos podem ser posicionados usando a parte top, bottom, left e right propriedades.

POSICIONAMENTO ESTÁTICOElementos HTML são posicionados estáticos por padrão. Um elemento estático é posicionado sempre de acordo com o fluxo normal da página ele segue o fluxo normal dos elementos da página.

POSICIONAMENTO RELATIVOO posicionamento relativo é definido pelo valor relative da propriedade position. Neste caso a janela se movimenta quando a rolagem da pagina é ativada. As propriedades top, right, bottom e left em relação a pagina, têm efeito sobre elementos posicionados relativamente, ao contrário do que acontece com o posicionamento estático.

POSICIONAMENTO ABSOLUTOO posicionamento absoluto é calculado tendo em conta a janela do browser. Neste caso as coordenadas x e y de uma DIV ficam em perfeita correlação com as dimensões da janela do browser. Nesse tipo de posicionamento, a origem não varia, o contexto do posicionamento é sempre o mesmo. Ao contrario, no posicionamento absoluto o contexto é determinado pelo posicionamento de seus boxes ancestrais.

A regra que rege o posicionamento estabelece que elementos posicionados com a declaração position: absolute serão deslocados tomado como base para a determinação das coordenadas o ancestral mais próximo posicionado

POSICIONAMENTO FIXONesse tipo de posicionamento o Box posicionado permanece fixo em relação a uma referencia. O contexto do posicionamento é sempre a área da renderização na janela do navegador .

Static•Sua posição é dada automaticamente pelo fluxo da página: por padrão ele é renderizado logo após seus irmãos.•Não aceita um posicionamento manual (left, right, top, bottom).•O tamanho do seu elemento pai leva em conta o tamanho do elemento static.

PRINCIPAIS CARACTERÍSTICAS DE POSICIONAMENTO COM CSS

PRINCIPAIS CARACTERÍSTICAS DE POSICIONAMENTO COM CSS

Relative•Por padrão o elemento será renderizado da mesma maneira que o static.•Aceita posicionamento manual.•O tamanho do seu elemento pai leva em conta o tamanho do elemento relative, porém sem levar em conta seu posicionamento. O pai não sofreria alterações mesmo se o elemento fosse static.

PRINCIPAIS CARACTERÍSTICAS DE POSICIONAMENTO COM CSS

Fixed•Uma configuração de posicionamento vertical (left ou right) e uma horizontal (top ou bottom) é obrigatória.•O elemento será renderizado na página na posição indicada: mesmo que ocorra uma rolagem o elemento permanecerá no mesmo lugar.•Seu tamanho não conta para calcular o tamanho do elemento pai, é como se não fosse elemento filho.

PRINCIPAIS CARACTERÍSTICAS DE POSICIONAMENTO COM CSS

Absolute•Uma configuração de posicionamento vertical (left ou right) e uma horizontal (top ou bottom) é obrigatória.•O elemento será renderizado na posição indicada, porém relativa ao primeiro elemento pai cujo position seja diferente de static ou, se não existir este pai, relativa à página.•Seu tamanho não conta para calcular o tamanho do elemento pai.

Exemplos de posicionamento com CSS