css - posicionamento
TRANSCRIPT
![Page 2: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/2.jpg)
2
Sumário
• Propriedades
• display
• position
• z-index
• float
![Page 3: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/3.jpg)
3
display
![Page 4: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/4.jpg)
4
display
![Page 5: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/5.jpg)
5
display
![Page 6: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/6.jpg)
6
display
![Page 7: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/7.jpg)
7
display
![Page 8: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/8.jpg)
8
display
![Page 9: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/9.jpg)
9
display
![Page 10: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/10.jpg)
10
display
• Como fazer para um elemento desaparecer?
• display: none
• visibility: hidden
![Page 11: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/11.jpg)
11
displaydisplay: none
![Page 12: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/12.jpg)
12
displayvisibility:hidden
![Page 13: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/13.jpg)
13
position
![Page 14: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/14.jpg)
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.
![Page 15: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/15.jpg)
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.
![Page 16: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/16.jpg)
16
position• Posicionamento estático (position: static)
![Page 17: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/17.jpg)
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
![Page 18: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/18.jpg)
18
position• Posicionamento fixo (position: fixed)
![Page 19: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/19.jpg)
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
![Page 20: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/20.jpg)
20
position• Posicionamento relativo (position: relative)
![Page 21: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/21.jpg)
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
![Page 22: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/22.jpg)
22
position• Posicionamento absoluto (position: absolute)
![Page 23: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/23.jpg)
23
position
• As propriedades de height e width também são afetadas pelo tipo de posicionamento do elemento, quando utilizando dimensões relativas, como por exemplo:
• width: 100%
• height: 40%
![Page 24: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/24.jpg)
24
z-index
![Page 25: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/25.jpg)
25
• Elementos não posicionados estaticamente (no fluxo normal de uma página) podem ser sobrepostos
z-index
![Page 26: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/26.jpg)
26
• Para definir qual elemento será posicionado sobre o outro pode ser utilizada a propriedade z-index
z-index
![Page 27: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/27.jpg)
27
• 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
z-index
![Page 28: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/28.jpg)
28
float
![Page 29: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/29.jpg)
29
• 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
float
![Page 30: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/30.jpg)
30
float
![Page 31: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/31.jpg)
31
float
![Page 32: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/32.jpg)
32
Exercício
• Faça uma estrutura HTML, utilizando atributos de padding, margin, height, width, border; que seja apresentada da seguinte forma:
![Page 33: CSS - Posicionamento](https://reader034.vdocument.in/reader034/viewer/2022052622/5596f0011a28ab19778b470c/html5/thumbnails/33.jpg)
33
Exercício
• Faça um código HTML e CSS que tenha o seguinte layout