Conteúdo principal
Curso: Programação > Unidade 2
Lição 6: Layout CSS- Agrupamento de elementos CSS
- Largura, altura e overflow em CSS
- Modelo de caixa CSS
- Desafio: O modelo boxer
- Posição CSS
- Desafio: Posicionamento do planeta
- CSS em seu estado selvagem: Google Maps
- Elementos CSS flutuantes
- Desafio: Nuvens flutuantes
- Usando propriedades de leiaute CSS
- Planejando sua página web
- Projeto: convite de evento
© 2024 Khan AcademyTermos de usoPolítica de privacidadeAviso de cookies
CSS em seu estado selvagem: Google Maps
Quer participar da conversa?
Existe algum mecanismo para que isto seja regulado automaticamente ?(5 votos)
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)
Em5:31, como a Lua consegue tapar o Sol? O Sol não é bem maior que a Lua?(1 voto)
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)
- Existe algum mecanismo para que isto seja regulado automaticamente ?(0 votos)
5:31Transcriçã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!