1
00:00:00,550 --> 00:00:02,233
Agora vamos aprender como usar CSS

2
00:00:02,233 --> 00:00:04,113
para realmente mover as coisas.

3
00:00:04,113 --> 00:00:06,224
Não apenas colocá-las
próximas uma da outra,

4
00:00:06,224 --> 00:00:07,637
mas para realmente colocá-las

5
00:00:07,637 --> 00:00:09,029
uma sobre a outra.

6
00:00:09,029 --> 00:00:11,611
Aqui, temos uma página

7
00:00:11,611 --> 00:00:16,041
com alguns cabeçalhos, imagens e alguns

8
00:00:16,041 --> 00:00:17,709
parágrafos embaixo.

9
00:00:17,899 --> 00:00:20,155
E atualmente está alinhada

10
00:00:20,155 --> 00:00:22,177
com o posicionamento padrão

11
00:00:22,177 --> 00:00:24,212
que o navegador usa,

12
00:00:24,212 --> 00:00:26,959
que chamamos de posicionamento
estático ou normal.

13
00:00:26,959 --> 00:00:29,388
Isso significa que elementos
alinhados em linha,

14
00:00:29,388 --> 00:00:30,299
como imagens,

15
00:00:30,299 --> 00:00:32,297
são dispostos da esquerda
para a direita

16
00:00:32,297 --> 00:00:33,800
e elementos de bloco,

17
00:00:33,800 --> 00:00:35,490
como cabeçalhos e parágrafos,

18
00:00:35,490 --> 00:00:37,565
são dispostos de cima para baixo.

19
00:00:37,565 --> 00:00:39,915
Podemos mudar esse
posicionamento padrão

20
00:00:39,915 --> 00:00:42,670
usando a propriedade 
"position" do CSS.

21
00:00:42,670 --> 00:00:45,621
Vamos testar isso com
a imagem da paisagem.

22
00:00:45,621 --> 00:00:49,657
Vamos digitar "position", dois pontos e

23
00:00:49,657 --> 00:00:50,986
"relative" para o valor.

24
00:00:50,986 --> 00:00:53,056
O uso do posicionamento "relative"

25
00:00:53,056 --> 00:00:55,517
significa que as posicionará
como normalmente faria,

26
00:00:55,517 --> 00:00:57,791
mas dá uma deslocada 
em alguma quantidade.

27
00:00:57,791 --> 00:01:00,156
Agora, para dizer ao 
navegador a quantidade

28
00:01:00,156 --> 00:01:01,501
que queremos deslocar,

29
00:01:01,501 --> 00:01:03,220
precisamos usar 
algumas combinações

30
00:01:03,220 --> 00:01:05,179
de quatro novas propriedades de CSS:

31
00:01:05,179 --> 00:01:07,425
"Top", "bottom", "left" e "right".

32
00:01:07,425 --> 00:01:09,441
Digamos que queremos
que ela tenha

33
00:01:09,441 --> 00:01:11,875
vinte pixels pra baixo.

34
00:01:11,875 --> 00:01:13,626
Digite: "top: 20px"

35
00:01:13,626 --> 00:01:15,222
e mais 10 pixels
pela esquerda,

36
00:01:15,222 --> 00:01:16,675
digamos: "left:10px".

37
00:01:16,675 --> 00:01:18,668
Está meio bancana,

38
00:01:18,668 --> 00:01:20,893
mas não muito.

39
00:01:20,893 --> 00:01:23,472
Eu quero te mostrar
algo bem mais legal,

40
00:01:23,472 --> 00:01:25,077
o posicionamento absoluto.

41
00:01:25,077 --> 00:01:26,583
Podemos usá-lo para
deixar um elemento

42
00:01:26,583 --> 00:01:28,525
completamente fora
do fluxo normal

43
00:01:28,525 --> 00:01:30,613
e colocá-lo em qualquer lugar da tela.

44
00:01:30,613 --> 00:01:31,664
Para fazer isso,

45
00:01:31,664 --> 00:01:32,945
vou mudar de "relative"

46
00:01:32,945 --> 00:01:34,042
para "absolute"

47
00:01:34,042 --> 00:01:35,069
na imagem da paisagem

48
00:01:35,069 --> 00:01:37,035
e manter as propriedades
"top" e "left".

49
00:01:37,035 --> 00:01:37,778
E você pode ver

50
00:01:37,778 --> 00:01:39,213
que a paisagem agora está

51
00:01:39,213 --> 00:01:41,445
ocultando nossas imagens e a dança.

52
00:01:41,445 --> 00:01:42,712
Agora, vamos arrumar isso.

53
00:01:42,712 --> 00:01:44,791
Vamos começar pelo Winston.

54
00:01:44,791 --> 00:01:48,456
Vamos adicionar uma regra para o Winston

55
00:01:48,456 --> 00:01:51,466
e atribuir-lhe o posicionamento "absolute"

56
00:01:52,036 --> 00:01:54,302
e deixe-me colocar

57
00:01:54,302 --> 00:01:56,110
"top" quarenta pixels.

58
00:01:56,110 --> 00:01:58,394
Bem, melhor "top" cinquenta pixels

59
00:01:58,394 --> 00:02:00,055
e cinquenta pixels para "left".

60
00:02:00,055 --> 00:02:01,934
Ok, parece bom.

61
00:02:02,234 --> 00:02:04,992
Hopper está ansioso para
ficar no topo também.

62
00:02:05,447 --> 00:02:08,265
Vamos dizer que Hopper
também precisa

63
00:02:08,265 --> 00:02:10,631
de posicionamento "absolute"

64
00:02:10,631 --> 00:02:15,218
e vamos deixar "top" com trinta pixels

65
00:02:15,218 --> 00:02:17,814
e "left" com sessenta pixels.

66
00:02:17,814 --> 00:02:19,613
Ok, meu objetivo é

67
00:02:19,613 --> 00:02:21,216
fazer parecer que Hopper

68
00:02:21,216 --> 00:02:23,743
esteja dançando em frente a Winston.

69
00:02:23,743 --> 00:02:26,550
Mas agora não parece assim

70
00:02:26,550 --> 00:02:28,374
porque Winston está sendo desenhado

71
00:02:28,374 --> 00:02:30,108
sobre Hopper.

72
00:02:30,108 --> 00:02:31,948
Para arrumar isso,

73
00:02:31,948 --> 00:02:33,619
eu poderia mudar a ordem das

74
00:02:33,619 --> 00:02:35,136
tags das imagens

75
00:02:35,136 --> 00:02:36,684
no HTML,

76
00:02:36,684 --> 00:02:38,699
mas uma maneira melhor é

77
00:02:38,699 --> 00:02:42,057
usar a propriedade "z-index" do CSS.

78
00:02:42,057 --> 00:02:44,079
Podemos usá-la para
dizer ao navegador

79
00:02:44,079 --> 00:02:46,276
exatamente em qual ordem
desenhar os elementos,

80
00:02:46,276 --> 00:02:48,074
dando-lhes diferentes índices em z.

81
00:02:48,074 --> 00:02:50,691
Então vou começar pela paisagem

82
00:02:50,691 --> 00:02:53,168
e dar um "z-index" de um

83
00:02:53,268 --> 00:02:55,895
e Winston vai acima com dois.

84
00:02:56,345 --> 00:02:58,784
Hopper no topo com três

85
00:02:59,054 --> 00:03:00,081
Certo!

86
00:03:00,081 --> 00:03:02,641
Agora Hopper está dançando
na frente do Winston.

87
00:03:02,641 --> 00:03:04,078
Mesmo que ele não goste disso,

88
00:03:04,078 --> 00:03:05,649
mas ele terá que
lidar com isso.

89
00:03:05,649 --> 00:03:07,801
Mas agora ainda temos cabeçalhos

90
00:03:07,801 --> 00:03:09,991
e colunas que estão escondidas.

91
00:03:09,991 --> 00:03:12,450
Então vejamos, vamos tentar

92
00:03:12,450 --> 00:03:13,942
e talvez eu queira que

93
00:03:13,942 --> 00:03:16,886
a dança esteja acima de tudo,

94
00:03:16,886 --> 00:03:18,591
então também vou dar-lhe

95
00:03:18,591 --> 00:03:19,968
um posicionamento "absolute"

96
00:03:19,968 --> 00:03:21,757
e um "z-index" de quatro.

97
00:03:22,137 --> 00:03:22,997
Ok, parece bom.

98
00:03:22,997 --> 00:03:24,421
Talvez "left" 10 pixels.

99
00:03:24,421 --> 00:03:25,412
Apenas mova um pouco

100
00:03:25,412 --> 00:03:26,912
Talvez, um pouco mais

101
00:03:26,912 --> 00:03:28,518
Tudo bem, parece bom

102
00:03:28,518 --> 00:03:29,868
Agora, para letra da música,

103
00:03:29,868 --> 00:03:31,113
quero apenas que ela

104
00:03:31,113 --> 00:03:32,816
apareça abaixo de tudo.

105
00:03:32,816 --> 00:03:35,525
Para isso, estou pensando

106
00:03:35,525 --> 00:03:38,219
usar a posição "relative" e então

107
00:03:38,219 --> 00:03:39,468
podemos usar o "top"

108
00:03:39,468 --> 00:03:40,679
que vocês sabem,

109
00:03:40,679 --> 00:03:42,304
igualaria a altura da imagem.

110
00:03:42,304 --> 00:03:44,949
Seria de duzentos e vinte pixels.

111
00:03:45,119 --> 00:03:48,425
Tudo bem, parece muito bom.

112
00:03:48,425 --> 00:03:51,389
Teremos uma festa bem doida rolando.

113
00:03:51,919 --> 00:03:53,822
Agora, se você para o vídeo

114
00:03:53,822 --> 00:03:55,240
e tentar rolar a página

115
00:03:55,770 --> 00:03:58,471
verá que tudo se move junto e

116
00:03:59,069 --> 00:04:00,749
o importante é que

117
00:04:00,749 --> 00:04:02,616
o posicionamento 
"absolute" é relativo

118
00:04:02,616 --> 00:04:04,213
ao topo da página.

119
00:04:04,213 --> 00:04:06,017
Conforme você rola a
página para baixo

120
00:04:06,040 --> 00:04:07,733
quem tinha 10 pixels em "Top",

121
00:04:07,733 --> 00:04:10,550
vai sumir da tela,

122
00:04:10,550 --> 00:04:12,139
porque você está se distanciando

123
00:04:12,139 --> 00:04:14,330
do topo da página

124
00:04:14,330 --> 00:04:15,657
Outra opção é

125
00:04:15,657 --> 00:04:17,109
usar o posicionamento "fixed".

126
00:04:17,109 --> 00:04:18,465
Isso fará com que pareça que

127
00:04:18,465 --> 00:04:20,324
as coisas não se movem de jeito nenhum

128
00:04:20,324 --> 00:04:22,097
e se você quiser tentar isso,

129
00:04:22,097 --> 00:04:23,051
podemos mudar apenas

130
00:04:23,051 --> 00:04:25,813
H1 de "absolute" to "fixed",

131
00:04:25,813 --> 00:04:29,073
parar e tentar rolar a página

132
00:04:29,583 --> 00:04:30,915
Você verá que

133
00:04:30,915 --> 00:04:33,678
a dança fica no mesmo lugar

134
00:04:33,678 --> 00:04:35,667
Porque agora ela está na verdade

135
00:04:35,667 --> 00:04:39,296
relativa ao topo da tela, da janela.

136
00:04:40,712 --> 00:04:43,737
Ok, conseguimos usar

137
00:04:43,737 --> 00:04:45,941
três diferentes propriedades
de poscionamento

138
00:04:45,941 --> 00:04:47,697
para fazer umas coisas bem legais

139
00:04:47,697 --> 00:04:48,519
Quando deveríamos

140
00:04:48,519 --> 00:04:51,071
usar o posicionamento
"absolute" ou "fixed"?

141
00:04:51,071 --> 00:04:53,109
Bem, você pode usá-los

142
00:04:53,109 --> 00:04:54,183
para fazer um jogo,

143
00:04:54,183 --> 00:04:55,483
como eu fiz aqui

144
00:04:55,483 --> 00:04:57,219
Porque você vai querer usar todas

145
00:04:57,219 --> 00:04:58,864
as partes da cena no navegador

146
00:04:58,864 --> 00:05:00,229
Mas você também pode usá-las

147
00:05:00,229 --> 00:05:01,634
para páginas normais,

148
00:05:01,634 --> 00:05:02,836
como na Khan Academy.

149
00:05:02,836 --> 00:05:04,943
Usamos posicionamento
"absolute" para modelos

150
00:05:04,943 --> 00:05:06,279
que pulam no meio da página

151
00:05:06,279 --> 00:05:07,790
e usamos posicionamento "fixed"

152
00:05:07,790 --> 00:05:09,671
para a caixa de busca
na seção de equipe

153
00:05:09,671 --> 00:05:12,383
Para que esteja sempre visível
quando você rolar a página.

154
00:05:12,383 --> 00:05:14,392
Você provavelmente não
usará posicionamento

155
00:05:14,392 --> 00:05:15,351
em todas as páginas,

156
00:05:15,351 --> 00:05:16,704
mas quando usá-lo

157
00:05:16,704 --> 00:05:18,731
ficará feliz que isso existe.

158
00:05:18,731 --> 00:05:20,000
Legendado por [Valter Bigeli]
Revisado por [Carlos A. N. C. R.]