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

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

CSS in der Wildnis: Google Maps

Wir untersuchen die CSS-Eigenschaften Position und z-index in Google Maps, indem wir die Entwicklertools unseres Browsers verwenden, um das CSS der Seite zu untersuchen. Diese Eigenschaften werden verwendet, um Elemente wie die Minikarte, die Hovercard und den Zoom-Button auf der Seite zu positionieren. Sieh dir an, wie die CSS-Konzepte, die wir lernen, auf komplexe, interaktive Websites angewendet werden, die wir jeden Tag nutzen!

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.

Video-Transkript

- Ich zeige dir ein Beispiel für die CSS-Position in z-index in freier Wildbahn; Google Maps. Wahrscheinlich haben die meisten von euch Google Maps benutzt oder einen anderen Online -Kartendienst benutzt, um dir zu helfen, das zu finden, was du suchst. Diese Dinger sind einfach richtig cool. Wir können herumstöbern, wir können hineinzoomen, wir können herauszoomen und wir können nach Dingen suchen. Also, da ich gerade in Barcelona bin, schaue ich nach der Sagrada Familia, das ist diese wunderschöne Kirche. Das ist eigentlich HTML, CSS und JavaScript. Ich zeige dir mal den ganzen z-index, der hier vor sich geht. Also all die verschiedenen Elemente, die wir sehen, sie wurden alle positioniert mit CSS so positioniert, dass sie übereinander liegen und sie verwenden z-index auf eine ganz bestimmte Weise um sicherzustellen, dass die Reihenfolge genau richtig ist. Also, lass mich einfach meine Chrome-Konsole benutzen um dir ein paar Dinge zu zeigen. Diese Minikarte hier, in der Ecke, hat die Position absolut, unten Null, links Null und einen z-Index von eins. Damit sollte es über etwas stehen mit einem Z-Index von Null. Diese Hovercard, die auftaucht, und hat all diese Optionen hier, es hat eine fixe Vision und dann einen Z-Index von 10. Es wird also über vielen Dingen angezeigt. Der Zoom-Button hat einen Z-Index von zwei, Das sollte also bedeuten, dass er am Ende unter der Hovercard. Lass uns das hier rüberschieben und sehen, was passiert. Siehst du, die Hovercard, die auftaucht, erscheint über dem Zoom, weil sie einen Z-Index von vier hat und der Zoom hat einen Z-Index von zwei. Wie du sehen kannst, verwendet Google Maps eine Menge CSS-Position und z-index, um das Layout die Karte und die Steuerelemente darauf anzuordnen. Es werden auch eine Menge anderer CSS und JavaScript verwendet, aber es ist ziemlich toll, dass du jetzt anfangen kannst zu verstehen, wie andere Websites aufgebaut sind, die ganz anders aussehen als die, die die wir bis jetzt gezeigt haben. Das ist die Macht von CSS.