Agora vamos aprender como usar CSS
para realmente mover as coisas.
Não apenas colocá-las próximas uma da outra,
mas para realmente colocá-las
uma sobre a outra.
Aqui, temos uma página
com alguns cabeçalhos, imagens e alguns
parágrafos embaixo.
E atualmente está alinhada
com o posicionamento padrão
que o navegador usa,
que chamamos de posicionamento estático ou normal.
Isso significa que elementos alinhados em linha,
como imagens,
são dispostos da esquerda para a direita
e elementos de bloco,
como cabeçalhos e parágrafos,
são dispostos de cima para baixo.
Podemos mudar esse posicionamento padrão
usando a propriedade "position" do CSS.
Vamos testar isso com a imagem da paisagem.
Vamos digitar "position", dois pontos e
"relative" para o valor.
O uso do posicionamento "relative"
significa que as posicionará como normalmente faria,
mas dá uma deslocada em alguma quantidade.
Agora, para dizer ao navegador a quantidade
que queremos deslocar,
precisamos usar algumas combinações
de quatro novas propriedades de CSS:
"Top", "bottom", "left" e "right".
Digamos que queremos que ela tenha
vinte pixels pra baixo.
Digite: "top: 20px"
e mais 10 pixels pela esquerda,
digamos: "left:10px".
Está meio bancana,
mas não muito.
Eu quero te mostrar algo bem mais legal,
o posicionamento absoluto.
Podemos usá-lo para deixar um elemento
completamente fora do fluxo normal
e colocá-lo em qualquer lugar da tela.
Para fazer isso,
vou mudar de "relative"
para "absolute"
na imagem da paisagem
e manter as propriedades "top" e "left".
E você pode ver
que a paisagem agora está
ocultando nossas imagens e a dança.
Agora, vamos arrumar isso.
Vamos começar pelo Winston.
Vamos adicionar uma regra para o Winston
e atribuir-lhe o posicionamento "absolute"
e deixe-me colocar
"top" quarenta pixels.
Bem, melhor "top" cinquenta pixels
e cinquenta pixels para "left".
Ok, parece bom.
Hopper está ansioso para ficar no topo também.
Vamos dizer que Hopper também precisa
de posicionamento "absolute"
e vamos deixar "top" com trinta pixels
e "left" com sessenta pixels.
Ok, meu objetivo é
fazer parecer que Hopper
esteja dançando em frente a Winston.
Mas agora não parece assim
porque Winston está sendo desenhado
sobre Hopper.
Para arrumar isso,
eu poderia mudar a ordem das
tags das imagens
no HTML,
mas uma maneira melhor é
usar a propriedade "z-index" do CSS.
Podemos usá-la para dizer ao navegador
exatamente em qual ordem desenhar os elementos,
dando-lhes diferentes índices em z.
Então vou começar pela paisagem
e dar um "z-index" de um
e Winston vai acima com dois.
Hopper no topo com três
Certo!
Agora Hopper está dançando na frente do Winston.
Mesmo que ele não goste disso,
mas ele terá que lidar com isso.
Mas agora ainda temos cabeçalhos
e colunas que estão escondidas.
Então vejamos, vamos tentar
e talvez eu queira que
a dança esteja acima de tudo,
então também vou dar-lhe
um posicionamento "absolute"
e um "z-index" de quatro.
Ok, parece bom.
Talvez "left" 10 pixels.
Apenas mova um pouco
Talvez, um pouco mais
Tudo bem, parece bom
Agora, para letra da música,
quero apenas que ela
apareça abaixo de tudo.
Para isso, estou pensando
usar a posição "relative" e então
podemos usar o "top"
que vocês sabem,
igualaria a altura da imagem.
Seria de duzentos e vinte pixels.
Tudo bem, parece muito bom.
Teremos uma festa bem doida rolando.
Agora, se você para o vídeo
e tentar rolar a página
verá que tudo se move junto e
o importante é que
o posicionamento "absolute" é relativo
ao topo da página.
Conforme você rola a página para baixo
quem tinha 10 pixels em "Top",
vai sumir da tela,
porque você está se distanciando
do topo da página
Outra opção é
usar o posicionamento "fixed".
Isso fará com que pareça que
as coisas não se movem de jeito nenhum
e se você quiser tentar isso,
podemos mudar apenas
H1 de "absolute" to "fixed",
parar e tentar rolar a página
Você verá que
a dança fica no mesmo lugar
Porque agora ela está na verdade
relativa ao topo da tela, da janela.
Ok, conseguimos usar
três diferentes propriedades de poscionamento
para fazer umas coisas bem legais
Quando deveríamos
usar o posicionamento "absolute" ou "fixed"?
Bem, você pode usá-los
para fazer um jogo,
como eu fiz aqui
Porque você vai querer usar todas
as partes da cena no navegador
Mas você também pode usá-las
para páginas normais,
como na Khan Academy.
Usamos posicionamento "absolute" para modelos
que pulam no meio da página
e usamos posicionamento "fixed"
para a caixa de busca na seção de equipe
Para que esteja sempre visível quando você rolar a página.
Você provavelmente não usará posicionamento
em todas as páginas,
mas quando usá-lo
ficará feliz que isso existe.
Legendado por [Valter Bigeli] Revisado por [Carlos A. N. C. R.]