Posicionamento em CSS

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