-
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.]
