CSS - Posicionamento

402 visualizações

Publicada em

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
402
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
15
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS - Posicionamento

  1. 1. CSS - Posicionamento Willian Massami Watanabe wwatanabe@utfpr.edu.br 1
  2. 2. Sumário• Propriedades • display • position • z-index • float 2
  3. 3. display 3
  4. 4. display 4
  5. 5. display 5
  6. 6. display 6
  7. 7. display 7
  8. 8. display 8
  9. 9. display 9
  10. 10. display• Como fazer para um elemento desaparecer? • display: none • visibility: hidden 10
  11. 11. displaydisplay: none 11
  12. 12. displayvisibility:hidden 12
  13. 13. position 13
  14. 14. position• O posicionamento dos elementos é feito com as seguintes propriedades CSS • position: absolute, fixed, relative, static, inherit • top, bottom, left, right: normalmente atribuídos com um tamanho em porcentagem, px ou em. 14
  15. 15. position• Posicionamento estático (position: static) • Forma de posicionamento padrão dos elementos • Os elementos são posicionados de acordo com a ordem de inserção na página • Elementos com posicionamento estático não são afetados pelas propriedades left, right, top e bottom. 15
  16. 16. position• Posicionamento estático (position: static) 16
  17. 17. position• Posicionamento fixo (position: fixed) • Elemento é posicionado de acordo com a janela do browser • Mesmo com a movimentação do scroll da janela do browser o elemento não muda de posição • Elementos de posição fixa não ocupam espaço de elementos de posição estática 17
  18. 18. position• Posicionamento fixo (position: fixed) 18
  19. 19. position• Posicionamento relativo (position: relative) • posicionamento definido de forma relativa à posição normal do próprio elemento • elementos posicionados relativamente ocupam espaço dos elementos estáticos 19
  20. 20. position• Posicionamento relativo (position: relative) 20
  21. 21. position• Posicionamento absoluto (position: absolute) • O elemento é posicionado relativamente ao primeiro pai que possua posição não estática. • Elementos posicionados absolutamente não ocupam espaço de elementos estáticos 21
  22. 22. position• Posicionamento absoluto (position: absolute) 22
  23. 23. position• As propriedades de height e widthtambém são afetadas pelo tipo de posicionamento do elemento, quando utilizando dimensões relativas, como por exemplo: • width: 100% • height: 40% 23
  24. 24. z-index 24
  25. 25. z-index• Elementos não posicionados estaticamente (no fluxo normal de uma página) podem ser sobrepostos 25
  26. 26. z-index• Para definir qual elemento será posicionado sobre o outro pode ser utilizada a propriedade z-index 26
  27. 27. z-index• A propriedade z-index contém um número que define qual elemento deve sobrepor outro elemento de mesmo tipo de posicionamento• z-index pode ser definido com números inteiros. Exemplo: -3333 e 432• Todo elemento tem por padrão a propriedade z-index de valor 0 27
  28. 28. float 28
  29. 29. float• A propriedade float é utilizada para estabelecer elementos que podem ser empurrados para os lados (direita ou esquerda).• Os elementos inseridos depois do elemento flutuante vão flutuar ao redor do elemento flutuante• Os elementos inseridos antes do elemento flutuante não vão ser afetados 29
  30. 30. float 30
  31. 31. float 31
  32. 32. Exercício• Faça uma estrutura HTML, utilizando atributos de padding, margin, height, width, border; que seja apresentada da seguinte forma: 32
  33. 33. Exercício• Faça um código HTML e CSS que tenha o seguinte layout 33

×