CSS в действие: Google Maps

Ще ти покажа пример за CSS позицониране със z-index – Google Maps. Вероятно и ти използваш Google Maps или други онлайн карти, за да намериш търсено място. Тези неща са много готини. Можем да разглеждаме около тях, да ги приближаваме, да ги отдалечаваме и да търсим неща. И тъй като в момента съм в Барселона, търся Sagrada Familia, което е една красива църква. Всъщност това е HTML, CSS и JavaScript. Нека ти покажа z-index-ите, които се използват тук. Всички елементи, които виждаме, са позиционирани със CSS, за да бъдат един над друг и използват z-index по много особен начин, за да е сигурно, че редът им е правилен. Ще използвам конзолата на Chrome, за да ти покажа някои неща. Тази малка карта в ъгъла има абсолютна позиция, долу нула, ляво нула и z-index 1. Това я поставя над нещо със z-index 0. Картичката, която изскочи току-що, има всички тези опции, има "position: fixed" и "z-index: 10". Затова се показва над много неща. Бутонът zoom има z-index 2, което значи, че ще бъде под картичката. Да преместим това тук и да видим какво се случва. Виж, която, която се появява, се появява над този бутон, защото има z-index 4, а zoom бутонът има z-index 2. Както виждаш, Google Maps използва много позициониране със CSS и z-index, за да постави всички карти и контроли над него. Разбира се, освен това използва и друг CSS и JavaScript код, но вече можеш да започнеш да разбираш как са построени някои уеб сайтове, които изглеждат напълно различно от тези, които разглеждахме досега. Това е силата на CSS.