If you're seeing this message, it means we're having trouble loading external resources on our website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Conteúdo principal

CSS em seu estado selvagem: Google Maps

Quer participar da conversa?

  • Avatar aqualine ultimate style do usuário CLL
    Existe algum mecanismo para que isto seja regulado automaticamente ?
    (5 votos)
    Avatar Default Khan Academy avatar do usuário
    • Avatar hopper cool style do usuário Helton Pereira
      Pelo que eu sei até agora, pode ser arrumado "automaticamente" quando você escreve os códigos na sequência que você quer, como se você estivesse construindo uma casa, primeiro você faz a base, constrói as paredes, telhados...
      Como você viu não é bem automático, ainda é você que arruma a sequência.
      Mas não é difícil fazer essa organização usando o código, basta colocar:
      { z-index: (a posição que você quer que o objeto ocupe); }
      Isso dentro de uma tagg...
      (2 votos)
  • Avatar blobby green style do usuário KayssonEduardoDias
    Em , como a Lua consegue tapar o Sol? O Sol não é bem maior que a Lua?
    (1 voto)
    Avatar Default Khan Academy avatar do usuário
    • Avatar winston default style do usuário Adelmo
      Analisemos uma questão semelhante: se você estiver olhando para uma lâmpada, fechar um dos olhos (supondo que tenha dois deles), e colocar uma moda próxima ao olho aberto, conseguirá "tapar" a lâmpada mesmo a moeda sendo menor. É tudo questão de referencial, a moeda não tapou realmente a lâmpada (afinal não é grande o suficiente para isso), só tapou para o seu olho aberto, assim como a lua "tapando" o sol, que será visto assim somente em determinadas partes do planeta durante um eclipse.
      (3 votos)
  • Avatar blobby green style do usuário a701620453
    Existe algum mecanismo para que isto seja regulado automaticamente ?
    (0 votos)
    Avatar Default Khan Academy avatar do usuário
Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.

Transcrição de vídeo

RKA11C Vou mostrar agora um exemplo de posição e índice z em CSS no Google Maps. A maioria de vocês já deve ter usado o Google Maps ou algum tipo de serviço de mapeamento on-line para ajudá-lo a encontrar o que você procura. Essas coisas são bem legais mesmo! Podemos navegar por ali, aproximar, afastar e procurar coisas. Já que estou em Barcelona agora, vou procurar a Sagrada Família, que é esta bela igreja. Isto é na verdade HTML, CSS e JavaScript. Mas deixa eu te mostrar todos os índices Z acontecendo aqui. Todos os diferentes elementos que vemos foram posicionados usando o CSS para estar um sobre o outro. E eles estão usando o índice z de um modo muito particular, para se certificar de que a ordem está precisamente correta. Agora, vou usar o console do Chrome para te mostrar algumas coisas. Este minimapa aqui no canto tem posição absoluta bottom com valor de zero pixel e esquerda zero pixel. E um índice z com valor 1. Isso deve colocá-lo acima de alguma coisa, com o índice z de valor zero. Este cartão flutuante que aparece em todas estas opções aqui tem posição fixa e, em seguida, um índice z com valor 10, e por isso vai aparecer no topo de um monte de coisas. O botão de zoom tem um índice z com valor 2, isso significa que ele vai ficar debaixo do cartão flutuante. Vamos apenas mover isso para cá e ver o que acontece. Viu? O cartão flutuante aparece em cima do botão de zoom, porque ele tem um índice z com valor 4, e o botão de zoom tem um índice z com o valor 2. Como você pode ver, o Google Maps usa várias posições e índice z em CSS, para posicionar todo o mapa e os controles em cima dele, além de vários outros códigos CSS e JavaScript. Agora, você pode começar a entender como outros sites são construídos. Esse é o poder do CSS!