O documento discute os diferentes tipos de posicionamento de elementos em CSS: estático, relativo, absoluto e fixo. Cada tipo possui propriedades e características específicas que determinam como o elemento é posicionado em relação aos outros elementos e à página. O posicionamento estático segue o fluxo normal da página, enquanto os demais tipos permitem posicionar manualmente os elementos usando propriedades top, bottom, left e right.

1. POSICIONAMENTO COM CSS
Brenda da Custa
João Marcelo
Josafá de Castro
Paula Janaina
Raimundo 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.

2. POSICIONAMENTO ESTÁTICO
Elementos 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 RELATIVO
O 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.

3. POSICIONAMENTO ABSOLUTO
O 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

4. POSICIONAMENTO FIXO
Nesse 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 .

5. PRINCIPAIS CARACTERÍSTICAS
DE POSICIONAMENTO COM CSS
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.

6. 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.

7. 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.

8. 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.

9. Exemplos de posicionamento com CSS