Olá a todos, bem-vindos de volta.
Hoje, vamos falar sobre posicionar elementos em sua página web.
Então, tentar definir sua página e
sua codificação provavelmente vai ser uma das
coisas mais demoradas e, potencialmente, frustrantes que você vai fazer em todo o curso.
E essa é uma das razões pelas quais eu saí quase toda esta semana
para nós praticarmos colocar as coisas na sua página.
As ideias em si são muito simples e simples, mas
é a colocá-los juntos, à medida que você adiciona mais e
mais à sua página, onde as coisas podem ficar um pouco complicadas.
Então vamos começar a falar sobre os diferentes elementos de posicionamento,
ou, as diferentes propriedades de posicionamento, que você pode usar, ok?
As propriedades de quatro posições são estáticas, relativas, absolutas e
fixas e, na maior parte, são muito diferentes.
Como eles trabalham juntos, ou como eles funcionam, é que cada um deles
também pode ser modificado por propriedades como superior, direita, inferior e esquerda.
Então você diz que tipo de posição você quer que o elemento seja, e
então você pode dizer, mas eu quero que ele esteja tão longe do topo ou
tão alto do fundo, ou tão longe da esquerda.
Então vamos começar com estática, e a razão pela qual vamos começar com estática
é porque você já está usando isso o tempo todo.
É o que chamamos de valor padrão para elementos.
Se você não disser mais nada, vai ser definido para isso.
Como funciona é que o navegador vai colocar cada elemento
apenas na próxima posição disponível.
Você pode dar-lhe valores como superior, inferior, esquerda e direita, mas
o navegador vai ignorá-lo completamente.
Como vai funcionar é algo assim.
Deixe-me ver se consigo desenhar isto aqui.
É que você tem sua tela.
E então é hora de começar a adicionar coisas à sua página, e o navegador diz, oh,
bem, isso é span, então ele se encaixa bem aqui.
E a próxima é uma extensão, então cabe bem aqui.
Oh, ela tem algo que está bloqueado, então eu preciso ir até aqui.
Então, à medida que você adiciona, ele apenas começa na parte superior, e funciona de maneira cruzada, e depois para baixo.
Mas podemos ir além disso.
Podemos mudar como o navegador posiciona as coisas, e
uma das maneiras que podemos fazer isso é usar posição relativa.
E quando digo relativo, quero dizer relativo a si mesmo.
Para onde iria?
Tudo bem, vamos vasculhar um pouco mais.
É, basicamente, muito semelhante à posição estática, mas
agora você pode adicionar esses deslocamentos.
O novo posicionamento, o novo lugar que colocamos o elemento,
não afetará nenhum de seus vizinhos.
Em vez disso, o que ele pode fazer é deixar buracos
onde o navegador pensou que deveria estar em primeiro lugar.
Normalmente, elementos relativamente posicionados são usados como recipientes ou
blocos para outros elementos.
Então deixe-me apenas mostrar-lhe outro exemplo rápido aqui.
Ligue isso.
Eu tenho minha janela do navegador, e vamos dizer que eu estou prestes a colocar em um elemento span, e
ele vai para lá.
Bem, em vez disso, se você diz que a posição é relativa,
e você dá algum tipo de número como top 10, em vez de colocá-lo aqui,
ele vai realmente ir para baixo onde deveria estar.
Então, novamente, estamos apenas adicionando pequenos números para mover as coisas de onde elas
normalmente iriam.
A próxima posição é o que chamamos absoluto.
E este pode realmente confundir as pessoas quando você iniciá-lo pela primeira vez,
porque o navegador, em vez de colocá-lo na próxima posição disponível, ele
ignora todos os elementos, e realmente apenas olha para o contêiner principal em que estava.
Neste caso, vamos mostrar um exemplo com o navegador.
Os outros elementos na página se comportam como se não existisse.
E o que isso pode levar, é que você pode acabar com um elemento em cima de outro.
Então, vamos tentar isso.
Tenho o meu navegador.
Não tenho muito espaço aqui.
Então, aqui mesmo. E digamos que eu tenho um div,
e eu decidi que é absoluto, e deve ser um 100 abaixo do topo, e
talvez um 100 mais.
Então vai bem aqui.
Tudo bem, bem, se estivéssemos fazendo parente,
o próximo elemento iria por baixo dele.
Mas se tivermos dois valores absolutos, o próximo que aparecer vai ficar,
de novo, em cima dele.
Certo, a posição final sobre a qual vou falar chama-se “consertado”.
E a posição fixa é relativa à janela do navegador.
É assim que eles são capazes de criar essas páginas,
onde às vezes você obtém esse pop-up, e você simplesmente não consegue fazê-lo desaparecer.
Você continua rolando e rolando, e ele está seguindo você.
Bem, como eles fizeram isso é que eles usaram essa posição fixa.
Esse elemento não vai se mover mesmo se a janela estiver rolada.
Só para saber se você estiver usando um navegador mais antigo ou se estiver tentando criar
para o Internet Explorer 7 ou 8, isso só funciona se você estiver usando um DOCTYPE HTML5.
Então, novamente, quando você pensa na posição fixa, pense em caixas pop-up
que simplesmente não vão embora.
Ou você também pode pensar nisso como algo mais útil, que é quando você está
em uma página, e você pode ter essa barra de navegação que está na parte superior, e à
medida que você percorre a página, você não precisa rolar para cima para
ver a barra de navegação, porque ela está sempre lá.
Então vamos em frente e olhar para um exemplo onde eu tenho alguns
elementos diferentes que usam as diferentes propriedades de posição.
Ok, eu estou prestes a mostrar-lhe uma página onde eu entrei, e
eu coloquei alguns elementos.
Só dois divs, e alguns parágrafos.
E só para começar, dei-lhes um pouco de estilo inicial, só para
podermos distinguir entre eles.
Para o nosso div, eu posição relativa, eu dei-lhe uma altura, uma largura, e uma borda.
Para os parágrafos, dei-lhe uma borda de uma cor diferente,
dei-lhe uma parte superior e esquerda, e deixei-a como posição estática,
porque essa é a posição padrão que sempre seria.
Então eu quero te mostrar como isso vai ficar no navegador.
Então, se você olhar, você pode ver que eu tenho dois divs, um aqui em cima e aqui em baixo, e
eu tenho meus três parágrafos.
Um, opa, desculpe.
Um, dois, três.
A primeira coisa que eu quero salientar é que isso não parece exatamente do jeito que alguns de
vocês podem esperar que ele pareça, ou mesmo exatamente da mesma maneira que alguns de vocês podem vê-lo se
você carregá-lo em seu navegador.
Em vez de colocar este parágrafo no topo,
ele é realmente empurrado um pouco para baixo. O
mesmo para o B e o C.
A razão que acontece é porque todos os navegadores têm valores padrão diferentes para
onde o parágrafo deve ser posicionado.
Então, deixe-me rolar aqui por um segundo.
Eu vou descer.
E você pode ver que há um código estranho aqui que diz,
-webkit- margin-before e -webkit-margin-after.
Este é um exemplo de algumas pseudo-classes que eles usaram.
Então eu não quero que essas diferentes coisas padrão entrem em jogo.
Então eu vou em frente e me livrar deles.
Depois que eu comentar aqueles fora e comentar que de volta, eu atualizo, e
agora nós temos o nosso A, B e C.
Então novamente, A, B e C, são todos relativos.
Você está dizendo ao navegador, basta colocá-lo no próximo espaço disponível.
Então vamos ver o que vai acontecer agora se eu mudar meu elemento
de relativo para estático, ou desculpe, de estático para relativo.
E você pode ver que eles se mudaram, e
a razão pela qual eles se mudaram é que eu dei os valores do top 100 e deixei 100.
Vá para baixo, empurre para cima.
Se eu mudar isso para 50.
Opa, 59, isso vai funcionar.
Você pode ver que não se move tanto.
Então, estática basta ir em primeiro lugar que você pode.
Relativo, vá em primeiro lugar que você pode, mas vá em frente,
você pode dizer se você quer que ele se mova um pouco em qualquer direção.
O próximo que vamos fazer é absoluto.
Talvez.
Lá vamos nós, então agora quero que você perceba uma coisa.
Aquele A e aquele B estão em cima um do outro.
Porque você disse, eu quero que você esteja 100 pixels para baixo e
59 pixels para fora do lado do elemento container.
Neste caso, é aquele div.
Então isso é estranho porque eles estão bem em cima um do outro, e está tudo misturado.
Há circunstâncias em que você vai querer que as coisas fiquem em cima um do outro.
Talvez um deles seja visível, e
um deles estará escondido, e eles vão mudar dinamicamente.
Mas isso é o que acontece com absoluta.
Agora, se eu rolar, eu vou fazer esta tela um pouco menor, e eu rolar,
você pode ver que o A e o B, eles rolam para longe.
E, claro, eu fiz este exemplo porque eu queria mostrar que se eu mudasse
isso para fixo agora, em vez de dizer posição o elemento em relação
ao seu pai, dizendo posição este elemento em relação a todo o navegador.
Então agora tudo está em cima um do outro, e se eu tentar ir embora.
Não funciona.
Fica bem ali, está bem?
Então, novamente, é estática, relativa, absoluta e fixa.
E eu quero que você brinque com isso, e saiba suas opções,
antes de começar a colocar seu código à mão.
Agora, uma das coisas que mostrei a vocês é que é possível que
vários elementos sejam colocados na mesma posição ou em cima um do outro.
E há uma maneira de lidar com isso se você não gostar da ordem de que eles estão
aparecendo.
E isso é chamado de índice Z.
O índice Z é apenas, basicamente, apenas um valor numérico, ou é positivo ou
negativo, que diz ao navegador a sua ordem de empilhamento.
Então, se você tem algo e você tem certeza que quer ter certeza que está sempre no
topo, você iria em frente e colocar algo como 100 nele.
Se você realmente não se importasse, você poderia dar 100 negativos.
E esta é a maneira que as pessoas podem seguir em frente, e
posicionar os elementos para serem um pouco mais dinâmicos mais tarde,
quando adicionamos algum JavaScript ou coisas diferentes como essa.
Então, o índice Z é algo que não um monte de pessoas codifica com, mas
é realmente útil quando você está usando elemento inspecionar,
se há algo abaixo, e você quer ver como ele se parece no topo.
Então vamos em frente e rever.
Posicionar seu elemento é a chave para criar os layouts que você
deseja ter.
E isso é especialmente importante se você está preocupado com o seu site olhando bem em
uma tela pequena, uma tela grande, etc
Então planejamento adequado vai tornar isso muito mais fácil para
você quando chegar a hora de codificar sua página.
Mas, na verdade, a coisa mais importante que você pode fazer agora é ir on-line, encontrar esses
tutoriais ou referências diferentes onde eles falam sobre posicionamento, e jogar com
ele até que você esteja um pouco mais confortável com a forma como cada um deles funciona.
Boa sorte.