Slides Posicionamento css

167 visualizações

Publicada em

posicionamento do css

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
167
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Slides Posicionamento css

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. Exemplos de posicionamento com CSS

×