0:00:00.550,0:00:02.233
Agora vamos aprender como usar CSS

0:00:02.233,0:00:04.113
para realmente mover as coisas.

0:00:04.113,0:00:06.224
Não apenas colocá-las[br]próximas uma da outra,

0:00:06.224,0:00:07.637
mas para realmente colocá-las

0:00:07.637,0:00:09.029
uma sobre a outra.

0:00:09.029,0:00:11.611
Aqui, temos uma página

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

0:00:16.041,0:00:17.709
parágrafos embaixo.

0:00:17.899,0:00:20.155
E atualmente está alinhada

0:00:20.155,0:00:22.177
com o posicionamento padrão

0:00:22.177,0:00:24.212
que o navegador usa,

0:00:24.212,0:00:26.959
que chamamos de posicionamento[br]estático ou normal.

0:00:26.959,0:00:29.388
Isso significa que elementos[br]alinhados em linha,

0:00:29.388,0:00:30.299
como imagens,

0:00:30.299,0:00:32.297
são dispostos da esquerda[br]para a direita

0:00:32.297,0:00:33.800
e elementos de bloco,

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

0:00:35.490,0:00:37.565
são dispostos de cima para baixo.

0:00:37.565,0:00:39.915
Podemos mudar esse[br]posicionamento padrão

0:00:39.915,0:00:42.670
usando a propriedade [br]"position" do CSS.

0:00:42.670,0:00:45.621
Vamos testar isso com[br]a imagem da paisagem.

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

0:00:49.657,0:00:50.986
"relative" para o valor.

0:00:50.986,0:00:53.056
O uso do posicionamento "relative"

0:00:53.056,0:00:55.517
significa que as posicionará[br]como normalmente faria,

0:00:55.517,0:00:57.791
mas dá uma deslocada [br]em alguma quantidade.

0:00:57.791,0:01:00.156
Agora, para dizer ao [br]navegador a quantidade

0:01:00.156,0:01:01.501
que queremos deslocar,

0:01:01.501,0:01:03.220
precisamos usar [br]algumas combinações

0:01:03.220,0:01:05.179
de quatro novas propriedades de CSS:

0:01:05.179,0:01:07.425
"Top", "bottom", "left" e "right".

0:01:07.425,0:01:09.441
Digamos que queremos[br]que ela tenha

0:01:09.441,0:01:11.875
vinte pixels pra baixo.

0:01:11.875,0:01:13.626
Digite: "top: 20px"

0:01:13.626,0:01:15.222
e mais 10 pixels[br]pela esquerda,

0:01:15.222,0:01:16.675
digamos: "left:10px".

0:01:16.675,0:01:18.668
Está meio bancana,

0:01:18.668,0:01:20.893
mas não muito.

0:01:20.893,0:01:23.472
Eu quero te mostrar[br]algo bem mais legal,

0:01:23.472,0:01:25.077
o posicionamento absoluto.

0:01:25.077,0:01:26.583
Podemos usá-lo para[br]deixar um elemento

0:01:26.583,0:01:28.525
completamente fora[br]do fluxo normal

0:01:28.525,0:01:30.613
e colocá-lo em qualquer lugar da tela.

0:01:30.613,0:01:31.664
Para fazer isso,

0:01:31.664,0:01:32.945
vou mudar de "relative"

0:01:32.945,0:01:34.042
para "absolute"

0:01:34.042,0:01:35.069
na imagem da paisagem

0:01:35.069,0:01:37.035
e manter as propriedades[br]"top" e "left".

0:01:37.035,0:01:37.778
E você pode ver

0:01:37.778,0:01:39.213
que a paisagem agora está

0:01:39.213,0:01:41.445
ocultando nossas imagens e a dança.

0:01:41.445,0:01:42.712
Agora, vamos arrumar isso.

0:01:42.712,0:01:44.791
Vamos começar pelo Winston.

0:01:44.791,0:01:48.456
Vamos adicionar uma regra para o Winston

0:01:48.456,0:01:51.466
e atribuir-lhe o posicionamento "absolute"

0:01:52.036,0:01:54.302
e deixe-me colocar

0:01:54.302,0:01:56.110
"top" quarenta pixels.

0:01:56.110,0:01:58.394
Bem, melhor "top" cinquenta pixels

0:01:58.394,0:02:00.055
e cinquenta pixels para "left".

0:02:00.055,0:02:01.934
Ok, parece bom.

0:02:02.234,0:02:04.992
Hopper está ansioso para[br]ficar no topo também.

0:02:05.447,0:02:08.265
Vamos dizer que Hopper[br]também precisa

0:02:08.265,0:02:10.631
de posicionamento "absolute"

0:02:10.631,0:02:15.218
e vamos deixar "top" com trinta pixels

0:02:15.218,0:02:17.814
e "left" com sessenta pixels.

0:02:17.814,0:02:19.613
Ok, meu objetivo é

0:02:19.613,0:02:21.216
fazer parecer que Hopper

0:02:21.216,0:02:23.743
esteja dançando em frente a Winston.

0:02:23.743,0:02:26.550
Mas agora não parece assim

0:02:26.550,0:02:28.374
porque Winston está sendo desenhado

0:02:28.374,0:02:30.108
sobre Hopper.

0:02:30.108,0:02:31.948
Para arrumar isso,

0:02:31.948,0:02:33.619
eu poderia mudar a ordem das

0:02:33.619,0:02:35.136
tags das imagens

0:02:35.136,0:02:36.684
no HTML,

0:02:36.684,0:02:38.699
mas uma maneira melhor é

0:02:38.699,0:02:42.057
usar a propriedade "z-index" do CSS.

0:02:42.057,0:02:44.079
Podemos usá-la para[br]dizer ao navegador

0:02:44.079,0:02:46.276
exatamente em qual ordem[br]desenhar os elementos,

0:02:46.276,0:02:48.074
dando-lhes diferentes índices em z.

0:02:48.074,0:02:50.691
Então vou começar pela paisagem

0:02:50.691,0:02:53.168
e dar um "z-index" de um

0:02:53.268,0:02:55.895
e Winston vai acima com dois.

0:02:56.345,0:02:58.784
Hopper no topo com três

0:02:59.054,0:03:00.081
Certo!

0:03:00.081,0:03:02.641
Agora Hopper está dançando[br]na frente do Winston.

0:03:02.641,0:03:04.078
Mesmo que ele não goste disso,

0:03:04.078,0:03:05.649
mas ele terá que[br]lidar com isso.

0:03:05.649,0:03:07.801
Mas agora ainda temos cabeçalhos

0:03:07.801,0:03:09.991
e colunas que estão escondidas.

0:03:09.991,0:03:12.450
Então vejamos, vamos tentar

0:03:12.450,0:03:13.942
e talvez eu queira que

0:03:13.942,0:03:16.886
a dança esteja acima de tudo,

0:03:16.886,0:03:18.591
então também vou dar-lhe

0:03:18.591,0:03:19.968
um posicionamento "absolute"

0:03:19.968,0:03:21.757
e um "z-index" de quatro.

0:03:22.137,0:03:22.997
Ok, parece bom.

0:03:22.997,0:03:24.421
Talvez "left" 10 pixels.

0:03:24.421,0:03:25.412
Apenas mova um pouco

0:03:25.412,0:03:26.912
Talvez, um pouco mais

0:03:26.912,0:03:28.518
Tudo bem, parece bom

0:03:28.518,0:03:29.868
Agora, para letra da música,

0:03:29.868,0:03:31.113
quero apenas que ela

0:03:31.113,0:03:32.816
apareça abaixo de tudo.

0:03:32.816,0:03:35.525
Para isso, estou pensando

0:03:35.525,0:03:38.219
usar a posição "relative" e então

0:03:38.219,0:03:39.468
podemos usar o "top"

0:03:39.468,0:03:40.679
que vocês sabem,

0:03:40.679,0:03:42.304
igualaria a altura da imagem.

0:03:42.304,0:03:44.949
Seria de duzentos e vinte pixels.

0:03:45.119,0:03:48.425
Tudo bem, parece muito bom.

0:03:48.425,0:03:51.389
Teremos uma festa bem doida rolando.

0:03:51.919,0:03:53.822
Agora, se você para o vídeo

0:03:53.822,0:03:55.240
e tentar rolar a página

0:03:55.770,0:03:58.471
verá que tudo se move junto e

0:03:59.069,0:04:00.749
o importante é que

0:04:00.749,0:04:02.616
o posicionamento [br]"absolute" é relativo

0:04:02.616,0:04:04.213
ao topo da página.

0:04:04.213,0:04:06.017
Conforme você rola a[br]página para baixo

0:04:06.040,0:04:07.733
quem tinha 10 pixels em "Top",

0:04:07.733,0:04:10.550
vai sumir da tela,

0:04:10.550,0:04:12.139
porque você está se distanciando

0:04:12.139,0:04:14.330
do topo da página

0:04:14.330,0:04:15.657
Outra opção é

0:04:15.657,0:04:17.109
usar o posicionamento "fixed".

0:04:17.109,0:04:18.465
Isso fará com que pareça que

0:04:18.465,0:04:20.324
as coisas não se movem de jeito nenhum

0:04:20.324,0:04:22.097
e se você quiser tentar isso,

0:04:22.097,0:04:23.051
podemos mudar apenas

0:04:23.051,0:04:25.813
H1 de "absolute" to "fixed",

0:04:25.813,0:04:29.073
parar e tentar rolar a página

0:04:29.583,0:04:30.915
Você verá que

0:04:30.915,0:04:33.678
a dança fica no mesmo lugar

0:04:33.678,0:04:35.667
Porque agora ela está na verdade

0:04:35.667,0:04:39.296
relativa ao topo da tela, da janela.

0:04:40.712,0:04:43.737
Ok, conseguimos usar

0:04:43.737,0:04:45.941
três diferentes propriedades[br]de poscionamento

0:04:45.941,0:04:47.697
para fazer umas coisas bem legais

0:04:47.697,0:04:48.519
Quando deveríamos

0:04:48.519,0:04:51.071
usar o posicionamento[br]"absolute" ou "fixed"?

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

0:04:53.109,0:04:54.183
para fazer um jogo,

0:04:54.183,0:04:55.483
como eu fiz aqui

0:04:55.483,0:04:57.219
Porque você vai querer usar todas

0:04:57.219,0:04:58.864
as partes da cena no navegador

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

0:05:00.229,0:05:01.634
para páginas normais,

0:05:01.634,0:05:02.836
como na Khan Academy.

0:05:02.836,0:05:04.943
Usamos posicionamento[br]"absolute" para modelos

0:05:04.943,0:05:06.279
que pulam no meio da página

0:05:06.279,0:05:07.790
e usamos posicionamento "fixed"

0:05:07.790,0:05:09.671
para a caixa de busca[br]na seção de equipe

0:05:09.671,0:05:12.383
Para que esteja sempre visível[br]quando você rolar a página.

0:05:12.383,0:05:14.392
Você provavelmente não[br]usará posicionamento

0:05:14.392,0:05:15.351
em todas as páginas,

0:05:15.351,0:05:16.704
mas quando usá-lo

0:05:16.704,0:05:18.731
ficará feliz que isso existe.

0:05:18.731,0:05:20.000
Legendado por [Valter Bigeli][br]Revisado por [Carlos A. N. C. R.]