Este documento resume as principais propriedades de posicionamento CSS como display, position, z-index e float. Explica como esconder elementos com display e como posicionar elementos de forma absoluta, fixa, relativa e estática usando a propriedade position.

1. CSS - Posicionamento
Willian Massami Watanabe
wwatanabe@utfpr.edu.br
1

2. Sumário
• Propriedades
• display
• position
• z-index
• float
2

3. display
3

4. display
4

5. display
5

6. display
6

7. display
7

8. display
8

9. display
9

10. display
• Como fazer para um elemento desaparecer?
• display: none
• visibility: hidden
10

11. display
display: none
11

12. display
visibility:hidden
12

13. position
13

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. 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. position
• Posicionamento estático (position: static)
16

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. position
• Posicionamento fixo (position: fixed)
18

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. position
• Posicionamento relativo (position: relative)
20

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. position
• Posicionamento absoluto (position: absolute)
22

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. z-index
24

25. z-index
• Elementos não posicionados estaticamente (no fluxo
normal de uma página) podem ser sobrepostos
25

26. z-index
• Para definir qual elemento será posicionado sobre o outro
pode ser utilizada a propriedade z-index
26

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

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

31. float
31

32. Exercício
• Faça uma estrutura HTML, utilizando atributos de padding,
margin, height, width, border; que seja apresentada da seguinte
forma:
32

33. Exercício
• Faça um código HTML e CSS que tenha o seguinte layout
33