WEBVTT

00:00:00.550 --> 00:00:02.233
Agora vamos aprender como usar CSS

00:00:02.233 --> 00:00:04.113
para realmente mover as coisas.

00:00:04.113 --> 00:00:06.224
Não apenas colocá-las
próximas uma da outra,

00:00:06.224 --> 00:00:07.637
mas para realmente colocá-las

00:00:07.637 --> 00:00:09.029
uma sobre a outra.

00:00:09.029 --> 00:00:11.611
Aqui, temos uma página

00:00:11.611 --> 00:00:16.041
com alguns cabeçalhos, imagens e alguns

00:00:16.041 --> 00:00:17.709
parágrafos embaixo.

00:00:17.899 --> 00:00:20.155
E atualmente está alinhada

00:00:20.155 --> 00:00:22.177
com o posicionamento padrão

00:00:22.177 --> 00:00:24.212
que o navegador usa,

00:00:24.212 --> 00:00:26.959
que chamamos de posicionamento
estático ou normal.

00:00:26.959 --> 00:00:29.388
Isso significa que elementos
alinhados em linha,

00:00:29.388 --> 00:00:30.299
como imagens,

00:00:30.299 --> 00:00:32.297
são dispostos da esquerda
para a direita

00:00:32.297 --> 00:00:33.800
e elementos de bloco,

00:00:33.800 --> 00:00:35.490
como cabeçalhos e parágrafos,

00:00:35.490 --> 00:00:37.565
são dispostos de cima para baixo.

00:00:37.565 --> 00:00:39.915
Podemos mudar esse
posicionamento padrão

00:00:39.915 --> 00:00:42.670
usando a propriedade 
"position" do CSS.

00:00:42.670 --> 00:00:45.621
Vamos testar isso com
a imagem da paisagem.

00:00:45.621 --> 00:00:49.657
Vamos digitar "position", dois pontos e

00:00:49.657 --> 00:00:50.986
"relative" para o valor.

00:00:50.986 --> 00:00:53.056
O uso do posicionamento "relative"

00:00:53.056 --> 00:00:55.517
significa que as posicionará
como normalmente faria,

00:00:55.517 --> 00:00:57.791
mas dá uma deslocada 
em alguma quantidade.

00:00:57.791 --> 00:01:00.156
Agora, para dizer ao 
navegador a quantidade

00:01:00.156 --> 00:01:01.501
que queremos deslocar,

00:01:01.501 --> 00:01:03.220
precisamos usar 
algumas combinações

00:01:03.220 --> 00:01:05.179
de quatro novas propriedades de CSS:

00:01:05.179 --> 00:01:07.425
"Top", "bottom", "left" e "right".

00:01:07.425 --> 00:01:09.441
Digamos que queremos
que ela tenha

00:01:09.441 --> 00:01:11.875
vinte pixels pra baixo.

00:01:11.875 --> 00:01:13.626
Digite: "top: 20px"

00:01:13.626 --> 00:01:15.222
e mais 10 pixels
pela esquerda,

00:01:15.222 --> 00:01:16.675
digamos: "left:10px".

00:01:16.675 --> 00:01:18.668
Está meio bancana,

00:01:18.668 --> 00:01:20.893
mas não muito.

00:01:20.893 --> 00:01:23.472
Eu quero te mostrar
algo bem mais legal,

00:01:23.472 --> 00:01:25.077
o posicionamento absoluto.

00:01:25.077 --> 00:01:26.583
Podemos usá-lo para
deixar um elemento

00:01:26.583 --> 00:01:28.525
completamente fora
do fluxo normal

00:01:28.525 --> 00:01:30.613
e colocá-lo em qualquer lugar da tela.

00:01:30.613 --> 00:01:31.664
Para fazer isso,

00:01:31.664 --> 00:01:32.945
vou mudar de "relative"

00:01:32.945 --> 00:01:34.042
para "absolute"

00:01:34.042 --> 00:01:35.069
na imagem da paisagem

00:01:35.069 --> 00:01:37.035
e manter as propriedades
"top" e "left".

00:01:37.035 --> 00:01:37.778
E você pode ver

00:01:37.778 --> 00:01:39.213
que a paisagem agora está

00:01:39.213 --> 00:01:41.445
ocultando nossas imagens e a dança.

00:01:41.445 --> 00:01:42.712
Agora, vamos arrumar isso.

00:01:42.712 --> 00:01:44.791
Vamos começar pelo Winston.

00:01:44.791 --> 00:01:48.456
Vamos adicionar uma regra para o Winston

00:01:48.456 --> 00:01:51.466
e atribuir-lhe o posicionamento "absolute"

00:01:52.036 --> 00:01:54.302
e deixe-me colocar

00:01:54.302 --> 00:01:56.110
"top" quarenta pixels.

00:01:56.110 --> 00:01:58.394
Bem, melhor "top" cinquenta pixels

00:01:58.394 --> 00:02:00.055
e cinquenta pixels para "left".

00:02:00.055 --> 00:02:01.934
Ok, parece bom.

00:02:02.234 --> 00:02:04.992
Hopper está ansioso para
ficar no topo também.

00:02:05.447 --> 00:02:08.265
Vamos dizer que Hopper
também precisa

00:02:08.265 --> 00:02:10.631
de posicionamento "absolute"

00:02:10.631 --> 00:02:15.218
e vamos deixar "top" com trinta pixels

00:02:15.218 --> 00:02:17.814
e "left" com sessenta pixels.

00:02:17.814 --> 00:02:19.613
Ok, meu objetivo é

00:02:19.613 --> 00:02:21.216
fazer parecer que Hopper

00:02:21.216 --> 00:02:23.743
esteja dançando em frente a Winston.

00:02:23.743 --> 00:02:26.550
Mas agora não parece assim

00:02:26.550 --> 00:02:28.374
porque Winston está sendo desenhado

00:02:28.374 --> 00:02:30.108
sobre Hopper.

00:02:30.108 --> 00:02:31.948
Para arrumar isso,

00:02:31.948 --> 00:02:33.619
eu poderia mudar a ordem das

00:02:33.619 --> 00:02:35.136
tags das imagens

00:02:35.136 --> 00:02:36.684
no HTML,

00:02:36.684 --> 00:02:38.699
mas uma maneira melhor é

00:02:38.699 --> 00:02:42.057
usar a propriedade "z-index" do CSS.

00:02:42.057 --> 00:02:44.079
Podemos usá-la para
dizer ao navegador

00:02:44.079 --> 00:02:46.276
exatamente em qual ordem
desenhar os elementos,

00:02:46.276 --> 00:02:48.074
dando-lhes diferentes índices em z.

00:02:48.074 --> 00:02:50.691
Então vou começar pela paisagem

00:02:50.691 --> 00:02:53.168
e dar um "z-index" de um

00:02:53.268 --> 00:02:55.895
e Winston vai acima com dois.

00:02:56.345 --> 00:02:58.784
Hopper no topo com três

00:02:59.054 --> 00:03:00.081
Certo!

00:03:00.081 --> 00:03:02.641
Agora Hopper está dançando
na frente do Winston.

00:03:02.641 --> 00:03:04.078
Mesmo que ele não goste disso,

00:03:04.078 --> 00:03:05.649
mas ele terá que
lidar com isso.

00:03:05.649 --> 00:03:07.801
Mas agora ainda temos cabeçalhos

00:03:07.801 --> 00:03:09.991
e colunas que estão escondidas.

00:03:09.991 --> 00:03:12.450
Então vejamos, vamos tentar

00:03:12.450 --> 00:03:13.942
e talvez eu queira que

00:03:13.942 --> 00:03:16.886
a dança esteja acima de tudo,

00:03:16.886 --> 00:03:18.591
então também vou dar-lhe

00:03:18.591 --> 00:03:19.968
um posicionamento "absolute"

00:03:19.968 --> 00:03:21.757
e um "z-index" de quatro.

00:03:22.137 --> 00:03:22.997
Ok, parece bom.

00:03:22.997 --> 00:03:24.421
Talvez "left" 10 pixels.

00:03:24.421 --> 00:03:25.412
Apenas mova um pouco

00:03:25.412 --> 00:03:26.912
Talvez, um pouco mais

00:03:26.912 --> 00:03:28.518
Tudo bem, parece bom

00:03:28.518 --> 00:03:29.868
Agora, para letra da música,

00:03:29.868 --> 00:03:31.113
quero apenas que ela

00:03:31.113 --> 00:03:32.816
apareça abaixo de tudo.

00:03:32.816 --> 00:03:35.525
Para isso, estou pensando

00:03:35.525 --> 00:03:38.219
usar a posição "relative" e então

00:03:38.219 --> 00:03:39.468
podemos usar o "top"

00:03:39.468 --> 00:03:40.679
que vocês sabem,

00:03:40.679 --> 00:03:42.304
igualaria a altura da imagem.

00:03:42.304 --> 00:03:44.949
Seria de duzentos e vinte pixels.

00:03:45.119 --> 00:03:48.425
Tudo bem, parece muito bom.

00:03:48.425 --> 00:03:51.389
Teremos uma festa bem doida rolando.

00:03:51.919 --> 00:03:53.822
Agora, se você para o vídeo

00:03:53.822 --> 00:03:55.240
e tentar rolar a página

00:03:55.770 --> 00:03:58.471
verá que tudo se move junto e

00:03:59.069 --> 00:04:00.749
o importante é que

00:04:00.749 --> 00:04:02.616
o posicionamento 
"absolute" é relativo

00:04:02.616 --> 00:04:04.213
ao topo da página.

00:04:04.213 --> 00:04:06.017
Conforme você rola a
página para baixo

00:04:06.040 --> 00:04:07.733
quem tinha 10 pixels em "Top",

00:04:07.733 --> 00:04:10.550
vai sumir da tela,

00:04:10.550 --> 00:04:12.139
porque você está se distanciando

00:04:12.139 --> 00:04:14.330
do topo da página

00:04:14.330 --> 00:04:15.657
Outra opção é

00:04:15.657 --> 00:04:17.109
usar o posicionamento "fixed".

00:04:17.109 --> 00:04:18.465
Isso fará com que pareça que

00:04:18.465 --> 00:04:20.324
as coisas não se movem de jeito nenhum

00:04:20.324 --> 00:04:22.097
e se você quiser tentar isso,

00:04:22.097 --> 00:04:23.051
podemos mudar apenas

00:04:23.051 --> 00:04:25.813
H1 de "absolute" to "fixed",

00:04:25.813 --> 00:04:29.073
parar e tentar rolar a página

00:04:29.583 --> 00:04:30.915
Você verá que

00:04:30.915 --> 00:04:33.678
a dança fica no mesmo lugar

00:04:33.678 --> 00:04:35.667
Porque agora ela está na verdade

00:04:35.667 --> 00:04:39.296
relativa ao topo da tela, da janela.

00:04:40.712 --> 00:04:43.737
Ok, conseguimos usar

00:04:43.737 --> 00:04:45.941
três diferentes propriedades
de poscionamento

00:04:45.941 --> 00:04:47.697
para fazer umas coisas bem legais

00:04:47.697 --> 00:04:48.519
Quando deveríamos

00:04:48.519 --> 00:04:51.071
usar o posicionamento
"absolute" ou "fixed"?

00:04:51.071 --> 00:04:53.109
Bem, você pode usá-los

00:04:53.109 --> 00:04:54.183
para fazer um jogo,

00:04:54.183 --> 00:04:55.483
como eu fiz aqui

00:04:55.483 --> 00:04:57.219
Porque você vai querer usar todas

00:04:57.219 --> 00:04:58.864
as partes da cena no navegador

00:04:58.864 --> 00:05:00.229
Mas você também pode usá-las

00:05:00.229 --> 00:05:01.634
para páginas normais,

00:05:01.634 --> 00:05:02.836
como na Khan Academy.

00:05:02.836 --> 00:05:04.943
Usamos posicionamento
"absolute" para modelos

00:05:04.943 --> 00:05:06.279
que pulam no meio da página

00:05:06.279 --> 00:05:07.790
e usamos posicionamento "fixed"

00:05:07.790 --> 00:05:09.671
para a caixa de busca
na seção de equipe

00:05:09.671 --> 00:05:12.383
Para que esteja sempre visível
quando você rolar a página.

00:05:12.383 --> 00:05:14.392
Você provavelmente não
usará posicionamento

00:05:14.392 --> 00:05:15.351
em todas as páginas,

00:05:15.351 --> 00:05:16.704
mas quando usá-lo

00:05:16.704 --> 00:05:18.731
ficará feliz que isso existe.

00:05:18.731 --> 00:05:20.000
Legendado por [Valter Bigeli]
Revisado por [Carlos A. N. C. R.]