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

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

CSS en la naturaleza: Google Maps

¿Quieres unirte a la conversación?

¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.

Transcripción del video

déjenme mostrarles un ejemplo de posicionamiento con css y dz e index en la naturaleza google maps probablemente muchos de ustedes ya hayan usado google maps o algún servicio de mapas en línea para ayudarlos a encontrar lo que están buscando y estas cosas son realmente geniales podemos navegar por ahí y hacer acercamientos o alejarnos y podemos buscar cosas así que como estoy en barcelona en este momento estoy buscando la sagrada familia que es una basílica hermosa esto en realidad es html css javascript pero dejen de mostrarles los zetas índices que hay aquí todos los elementos que vemos todos han sido posicionados usando css para estar unos sobre otros y están usando seta index en una forma muy particular para asegurarse de que el orden es exactamente correcto así que dejen de usar mi consola de chrome para mostrarles algunas cosas este mini mapa que en la esquina tiene posición absoluta botón 0 left 0 y 17 index de 1 así que esto se pondrá sobre cualquier cosa que tengas eta index de 0 esta tarjeta flotante que aparece aquí y que tiene todas estas opciones tiene position picks y tiene un zeta index de 10 así que se muestra por encima de muchas cosas el botón de zoom tiene un set a index de 2 eso significa que quedará debajo de la tarjeta flotante vamos a mover esto aquí arriba y ver qué pasa lo ve esta tarjeta flotante se muestra por encima del botón de zoom porque tiene un set a index de 4 y el zoom tiene un zeta index de 2 como puedes ver google maps se utiliza en gran cantidad la propiedad position de css iceta index con el fin de presentar el mapa y los controles en la parte superior también utiliza muchas otras cosas de css y de javascript pero es importante que ahora empieces a entender cómo están construidos otros sitios web que no se parecen en nada a los que hemos estado mostrando hasta ahora este es el poder de css