[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.55,0:00:02.23,Default,,0000,0000,0000,,Agora vamos aprender como usar CSS Dialogue: 0,0:00:02.23,0:00:04.11,Default,,0000,0000,0000,,para realmente mover as coisas. Dialogue: 0,0:00:04.11,0:00:06.22,Default,,0000,0000,0000,,Não apenas colocá-las\Npróximas uma da outra, Dialogue: 0,0:00:06.22,0:00:07.64,Default,,0000,0000,0000,,mas para realmente colocá-las Dialogue: 0,0:00:07.64,0:00:09.03,Default,,0000,0000,0000,,uma sobre a outra. Dialogue: 0,0:00:09.03,0:00:11.61,Default,,0000,0000,0000,,Aqui, temos uma página Dialogue: 0,0:00:11.61,0:00:16.04,Default,,0000,0000,0000,,com alguns cabeçalhos, imagens e alguns Dialogue: 0,0:00:16.04,0:00:17.71,Default,,0000,0000,0000,,parágrafos embaixo. Dialogue: 0,0:00:17.90,0:00:20.16,Default,,0000,0000,0000,,E atualmente está alinhada Dialogue: 0,0:00:20.16,0:00:22.18,Default,,0000,0000,0000,,com o posicionamento padrão Dialogue: 0,0:00:22.18,0:00:24.21,Default,,0000,0000,0000,,que o navegador usa, Dialogue: 0,0:00:24.21,0:00:26.96,Default,,0000,0000,0000,,que chamamos de posicionamento\Nestático ou normal. Dialogue: 0,0:00:26.96,0:00:29.39,Default,,0000,0000,0000,,Isso significa que elementos\Nalinhados em linha, Dialogue: 0,0:00:29.39,0:00:30.30,Default,,0000,0000,0000,,como imagens, Dialogue: 0,0:00:30.30,0:00:32.30,Default,,0000,0000,0000,,são dispostos da esquerda\Npara a direita Dialogue: 0,0:00:32.30,0:00:33.80,Default,,0000,0000,0000,,e elementos de bloco, Dialogue: 0,0:00:33.80,0:00:35.49,Default,,0000,0000,0000,,como cabeçalhos e parágrafos, Dialogue: 0,0:00:35.49,0:00:37.56,Default,,0000,0000,0000,,são dispostos de cima para baixo. Dialogue: 0,0:00:37.56,0:00:39.92,Default,,0000,0000,0000,,Podemos mudar esse\Nposicionamento padrão Dialogue: 0,0:00:39.92,0:00:42.67,Default,,0000,0000,0000,,usando a propriedade \N"position" do CSS. Dialogue: 0,0:00:42.67,0:00:45.62,Default,,0000,0000,0000,,Vamos testar isso com\Na imagem da paisagem. Dialogue: 0,0:00:45.62,0:00:49.66,Default,,0000,0000,0000,,Vamos digitar "position", dois pontos e Dialogue: 0,0:00:49.66,0:00:50.99,Default,,0000,0000,0000,,"relative" para o valor. Dialogue: 0,0:00:50.99,0:00:53.06,Default,,0000,0000,0000,,O uso do posicionamento "relative" Dialogue: 0,0:00:53.06,0:00:55.52,Default,,0000,0000,0000,,significa que as posicionará\Ncomo normalmente faria, Dialogue: 0,0:00:55.52,0:00:57.79,Default,,0000,0000,0000,,mas dá uma deslocada \Nem alguma quantidade. Dialogue: 0,0:00:57.79,0:01:00.16,Default,,0000,0000,0000,,Agora, para dizer ao \Nnavegador a quantidade Dialogue: 0,0:01:00.16,0:01:01.50,Default,,0000,0000,0000,,que queremos deslocar, Dialogue: 0,0:01:01.50,0:01:03.22,Default,,0000,0000,0000,,precisamos usar \Nalgumas combinações Dialogue: 0,0:01:03.22,0:01:05.18,Default,,0000,0000,0000,,de quatro novas propriedades de CSS: Dialogue: 0,0:01:05.18,0:01:07.42,Default,,0000,0000,0000,,"Top", "bottom", "left" e "right". Dialogue: 0,0:01:07.42,0:01:09.44,Default,,0000,0000,0000,,Digamos que queremos\Nque ela tenha Dialogue: 0,0:01:09.44,0:01:11.88,Default,,0000,0000,0000,,vinte pixels pra baixo. Dialogue: 0,0:01:11.88,0:01:13.63,Default,,0000,0000,0000,,Digite: "top: 20px" Dialogue: 0,0:01:13.63,0:01:15.22,Default,,0000,0000,0000,,e mais 10 pixels\Npela esquerda, Dialogue: 0,0:01:15.22,0:01:16.68,Default,,0000,0000,0000,,digamos: "left:10px". Dialogue: 0,0:01:16.68,0:01:18.67,Default,,0000,0000,0000,,Está meio bancana, Dialogue: 0,0:01:18.67,0:01:20.89,Default,,0000,0000,0000,,mas não muito. Dialogue: 0,0:01:20.89,0:01:23.47,Default,,0000,0000,0000,,Eu quero te mostrar\Nalgo bem mais legal, Dialogue: 0,0:01:23.47,0:01:25.08,Default,,0000,0000,0000,,o posicionamento absoluto. Dialogue: 0,0:01:25.08,0:01:26.58,Default,,0000,0000,0000,,Podemos usá-lo para\Ndeixar um elemento Dialogue: 0,0:01:26.58,0:01:28.52,Default,,0000,0000,0000,,completamente fora\Ndo fluxo normal Dialogue: 0,0:01:28.52,0:01:30.61,Default,,0000,0000,0000,,e colocá-lo em qualquer lugar da tela. Dialogue: 0,0:01:30.61,0:01:31.66,Default,,0000,0000,0000,,Para fazer isso, Dialogue: 0,0:01:31.66,0:01:32.94,Default,,0000,0000,0000,,vou mudar de "relative" Dialogue: 0,0:01:32.94,0:01:34.04,Default,,0000,0000,0000,,para "absolute" Dialogue: 0,0:01:34.04,0:01:35.07,Default,,0000,0000,0000,,na imagem da paisagem Dialogue: 0,0:01:35.07,0:01:37.04,Default,,0000,0000,0000,,e manter as propriedades\N"top" e "left". Dialogue: 0,0:01:37.04,0:01:37.78,Default,,0000,0000,0000,,E você pode ver Dialogue: 0,0:01:37.78,0:01:39.21,Default,,0000,0000,0000,,que a paisagem agora está Dialogue: 0,0:01:39.21,0:01:41.44,Default,,0000,0000,0000,,ocultando nossas imagens e a dança. Dialogue: 0,0:01:41.44,0:01:42.71,Default,,0000,0000,0000,,Agora, vamos arrumar isso. Dialogue: 0,0:01:42.71,0:01:44.79,Default,,0000,0000,0000,,Vamos começar pelo Winston. Dialogue: 0,0:01:44.79,0:01:48.46,Default,,0000,0000,0000,,Vamos adicionar uma regra para o Winston Dialogue: 0,0:01:48.46,0:01:51.47,Default,,0000,0000,0000,,e atribuir-lhe o posicionamento "absolute" Dialogue: 0,0:01:52.04,0:01:54.30,Default,,0000,0000,0000,,e deixe-me colocar Dialogue: 0,0:01:54.30,0:01:56.11,Default,,0000,0000,0000,,"top" quarenta pixels. Dialogue: 0,0:01:56.11,0:01:58.39,Default,,0000,0000,0000,,Bem, melhor "top" cinquenta pixels Dialogue: 0,0:01:58.39,0:02:00.06,Default,,0000,0000,0000,,e cinquenta pixels para "left". Dialogue: 0,0:02:00.06,0:02:01.93,Default,,0000,0000,0000,,Ok, parece bom. Dialogue: 0,0:02:02.23,0:02:04.99,Default,,0000,0000,0000,,Hopper está ansioso para\Nficar no topo também. Dialogue: 0,0:02:05.45,0:02:08.26,Default,,0000,0000,0000,,Vamos dizer que Hopper\Ntambém precisa Dialogue: 0,0:02:08.26,0:02:10.63,Default,,0000,0000,0000,,de posicionamento "absolute" Dialogue: 0,0:02:10.63,0:02:15.22,Default,,0000,0000,0000,,e vamos deixar "top" com trinta pixels Dialogue: 0,0:02:15.22,0:02:17.81,Default,,0000,0000,0000,,e "left" com sessenta pixels. Dialogue: 0,0:02:17.81,0:02:19.61,Default,,0000,0000,0000,,Ok, meu objetivo é Dialogue: 0,0:02:19.61,0:02:21.22,Default,,0000,0000,0000,,fazer parecer que Hopper Dialogue: 0,0:02:21.22,0:02:23.74,Default,,0000,0000,0000,,esteja dançando em frente a Winston. Dialogue: 0,0:02:23.74,0:02:26.55,Default,,0000,0000,0000,,Mas agora não parece assim Dialogue: 0,0:02:26.55,0:02:28.37,Default,,0000,0000,0000,,porque Winston está sendo desenhado Dialogue: 0,0:02:28.37,0:02:30.11,Default,,0000,0000,0000,,sobre Hopper. Dialogue: 0,0:02:30.11,0:02:31.95,Default,,0000,0000,0000,,Para arrumar isso, Dialogue: 0,0:02:31.95,0:02:33.62,Default,,0000,0000,0000,,eu poderia mudar a ordem das Dialogue: 0,0:02:33.62,0:02:35.14,Default,,0000,0000,0000,,tags das imagens Dialogue: 0,0:02:35.14,0:02:36.68,Default,,0000,0000,0000,,no HTML, Dialogue: 0,0:02:36.68,0:02:38.70,Default,,0000,0000,0000,,mas uma maneira melhor é Dialogue: 0,0:02:38.70,0:02:42.06,Default,,0000,0000,0000,,usar a propriedade "z-index" do CSS. Dialogue: 0,0:02:42.06,0:02:44.08,Default,,0000,0000,0000,,Podemos usá-la para\Ndizer ao navegador Dialogue: 0,0:02:44.08,0:02:46.28,Default,,0000,0000,0000,,exatamente em qual ordem\Ndesenhar os elementos, Dialogue: 0,0:02:46.28,0:02:48.07,Default,,0000,0000,0000,,dando-lhes diferentes índices em z. Dialogue: 0,0:02:48.07,0:02:50.69,Default,,0000,0000,0000,,Então vou começar pela paisagem Dialogue: 0,0:02:50.69,0:02:53.17,Default,,0000,0000,0000,,e dar um "z-index" de um Dialogue: 0,0:02:53.27,0:02:55.90,Default,,0000,0000,0000,,e Winston vai acima com dois. Dialogue: 0,0:02:56.34,0:02:58.78,Default,,0000,0000,0000,,Hopper no topo com três Dialogue: 0,0:02:59.05,0:03:00.08,Default,,0000,0000,0000,,Certo! Dialogue: 0,0:03:00.08,0:03:02.64,Default,,0000,0000,0000,,Agora Hopper está dançando\Nna frente do Winston. Dialogue: 0,0:03:02.64,0:03:04.08,Default,,0000,0000,0000,,Mesmo que ele não goste disso, Dialogue: 0,0:03:04.08,0:03:05.65,Default,,0000,0000,0000,,mas ele terá que\Nlidar com isso. Dialogue: 0,0:03:05.65,0:03:07.80,Default,,0000,0000,0000,,Mas agora ainda temos cabeçalhos Dialogue: 0,0:03:07.80,0:03:09.99,Default,,0000,0000,0000,,e colunas que estão escondidas. Dialogue: 0,0:03:09.99,0:03:12.45,Default,,0000,0000,0000,,Então vejamos, vamos tentar Dialogue: 0,0:03:12.45,0:03:13.94,Default,,0000,0000,0000,,e talvez eu queira que Dialogue: 0,0:03:13.94,0:03:16.89,Default,,0000,0000,0000,,a dança esteja acima de tudo, Dialogue: 0,0:03:16.89,0:03:18.59,Default,,0000,0000,0000,,então também vou dar-lhe Dialogue: 0,0:03:18.59,0:03:19.97,Default,,0000,0000,0000,,um posicionamento "absolute" Dialogue: 0,0:03:19.97,0:03:21.76,Default,,0000,0000,0000,,e um "z-index" de quatro. Dialogue: 0,0:03:22.14,0:03:22.100,Default,,0000,0000,0000,,Ok, parece bom. Dialogue: 0,0:03:22.100,0:03:24.42,Default,,0000,0000,0000,,Talvez "left" 10 pixels. Dialogue: 0,0:03:24.42,0:03:25.41,Default,,0000,0000,0000,,Apenas mova um pouco Dialogue: 0,0:03:25.41,0:03:26.91,Default,,0000,0000,0000,,Talvez, um pouco mais Dialogue: 0,0:03:26.91,0:03:28.52,Default,,0000,0000,0000,,Tudo bem, parece bom Dialogue: 0,0:03:28.52,0:03:29.87,Default,,0000,0000,0000,,Agora, para letra da música, Dialogue: 0,0:03:29.87,0:03:31.11,Default,,0000,0000,0000,,quero apenas que ela Dialogue: 0,0:03:31.11,0:03:32.82,Default,,0000,0000,0000,,apareça abaixo de tudo. Dialogue: 0,0:03:32.82,0:03:35.52,Default,,0000,0000,0000,,Para isso, estou pensando Dialogue: 0,0:03:35.52,0:03:38.22,Default,,0000,0000,0000,,usar a posição "relative" e então Dialogue: 0,0:03:38.22,0:03:39.47,Default,,0000,0000,0000,,podemos usar o "top" Dialogue: 0,0:03:39.47,0:03:40.68,Default,,0000,0000,0000,,que vocês sabem, Dialogue: 0,0:03:40.68,0:03:42.30,Default,,0000,0000,0000,,igualaria a altura da imagem. Dialogue: 0,0:03:42.30,0:03:44.95,Default,,0000,0000,0000,,Seria de duzentos e vinte pixels. Dialogue: 0,0:03:45.12,0:03:48.42,Default,,0000,0000,0000,,Tudo bem, parece muito bom. Dialogue: 0,0:03:48.42,0:03:51.39,Default,,0000,0000,0000,,Teremos uma festa bem doida rolando. Dialogue: 0,0:03:51.92,0:03:53.82,Default,,0000,0000,0000,,Agora, se você para o vídeo Dialogue: 0,0:03:53.82,0:03:55.24,Default,,0000,0000,0000,,e tentar rolar a página Dialogue: 0,0:03:55.77,0:03:58.47,Default,,0000,0000,0000,,verá que tudo se move junto e Dialogue: 0,0:03:59.07,0:04:00.75,Default,,0000,0000,0000,,o importante é que Dialogue: 0,0:04:00.75,0:04:02.62,Default,,0000,0000,0000,,o posicionamento \N"absolute" é relativo Dialogue: 0,0:04:02.62,0:04:04.21,Default,,0000,0000,0000,,ao topo da página. Dialogue: 0,0:04:04.21,0:04:06.02,Default,,0000,0000,0000,,Conforme você rola a\Npágina para baixo Dialogue: 0,0:04:06.04,0:04:07.73,Default,,0000,0000,0000,,quem tinha 10 pixels em "Top", Dialogue: 0,0:04:07.73,0:04:10.55,Default,,0000,0000,0000,,vai sumir da tela, Dialogue: 0,0:04:10.55,0:04:12.14,Default,,0000,0000,0000,,porque você está se distanciando Dialogue: 0,0:04:12.14,0:04:14.33,Default,,0000,0000,0000,,do topo da página Dialogue: 0,0:04:14.33,0:04:15.66,Default,,0000,0000,0000,,Outra opção é Dialogue: 0,0:04:15.66,0:04:17.11,Default,,0000,0000,0000,,usar o posicionamento "fixed". Dialogue: 0,0:04:17.11,0:04:18.46,Default,,0000,0000,0000,,Isso fará com que pareça que Dialogue: 0,0:04:18.46,0:04:20.32,Default,,0000,0000,0000,,as coisas não se movem de jeito nenhum Dialogue: 0,0:04:20.32,0:04:22.10,Default,,0000,0000,0000,,e se você quiser tentar isso, Dialogue: 0,0:04:22.10,0:04:23.05,Default,,0000,0000,0000,,podemos mudar apenas Dialogue: 0,0:04:23.05,0:04:25.81,Default,,0000,0000,0000,,H1 de "absolute" to "fixed", Dialogue: 0,0:04:25.81,0:04:29.07,Default,,0000,0000,0000,,parar e tentar rolar a página Dialogue: 0,0:04:29.58,0:04:30.92,Default,,0000,0000,0000,,Você verá que Dialogue: 0,0:04:30.92,0:04:33.68,Default,,0000,0000,0000,,a dança fica no mesmo lugar Dialogue: 0,0:04:33.68,0:04:35.67,Default,,0000,0000,0000,,Porque agora ela está na verdade Dialogue: 0,0:04:35.67,0:04:39.30,Default,,0000,0000,0000,,relativa ao topo da tela, da janela. Dialogue: 0,0:04:40.71,0:04:43.74,Default,,0000,0000,0000,,Ok, conseguimos usar Dialogue: 0,0:04:43.74,0:04:45.94,Default,,0000,0000,0000,,três diferentes propriedades\Nde poscionamento Dialogue: 0,0:04:45.94,0:04:47.70,Default,,0000,0000,0000,,para fazer umas coisas bem legais Dialogue: 0,0:04:47.70,0:04:48.52,Default,,0000,0000,0000,,Quando deveríamos Dialogue: 0,0:04:48.52,0:04:51.07,Default,,0000,0000,0000,,usar o posicionamento\N"absolute" ou "fixed"? Dialogue: 0,0:04:51.07,0:04:53.11,Default,,0000,0000,0000,,Bem, você pode usá-los Dialogue: 0,0:04:53.11,0:04:54.18,Default,,0000,0000,0000,,para fazer um jogo, Dialogue: 0,0:04:54.18,0:04:55.48,Default,,0000,0000,0000,,como eu fiz aqui Dialogue: 0,0:04:55.48,0:04:57.22,Default,,0000,0000,0000,,Porque você vai querer usar todas Dialogue: 0,0:04:57.22,0:04:58.86,Default,,0000,0000,0000,,as partes da cena no navegador Dialogue: 0,0:04:58.86,0:05:00.23,Default,,0000,0000,0000,,Mas você também pode usá-las Dialogue: 0,0:05:00.23,0:05:01.63,Default,,0000,0000,0000,,para páginas normais, Dialogue: 0,0:05:01.63,0:05:02.84,Default,,0000,0000,0000,,como na Khan Academy. Dialogue: 0,0:05:02.84,0:05:04.94,Default,,0000,0000,0000,,Usamos posicionamento\N"absolute" para modelos Dialogue: 0,0:05:04.94,0:05:06.28,Default,,0000,0000,0000,,que pulam no meio da página Dialogue: 0,0:05:06.28,0:05:07.79,Default,,0000,0000,0000,,e usamos posicionamento "fixed" Dialogue: 0,0:05:07.79,0:05:09.67,Default,,0000,0000,0000,,para a caixa de busca\Nna seção de equipe Dialogue: 0,0:05:09.67,0:05:12.38,Default,,0000,0000,0000,,Para que esteja sempre visível\Nquando você rolar a página. Dialogue: 0,0:05:12.38,0:05:14.39,Default,,0000,0000,0000,,Você provavelmente não\Nusará posicionamento Dialogue: 0,0:05:14.39,0:05:15.35,Default,,0000,0000,0000,,em todas as páginas, Dialogue: 0,0:05:15.35,0:05:16.70,Default,,0000,0000,0000,,mas quando usá-lo Dialogue: 0,0:05:16.70,0:05:18.73,Default,,0000,0000,0000,,ficará feliz que isso existe. Dialogue: 0,0:05:18.73,0:05:20.00,Default,,0000,0000,0000,,Legendado por [Valter Bigeli]\NRevisado por [Carlos A. N. C. R.]