CSS în sălbăticie: Google Maps

Lasă-mă să-ți arăt un exemplu de poziționare CSS și z-index în sălbăticie. Google Maps. Problabil majoritatea dintre voi ați folosit Google Maps sau vreun fel de serviciu de hărți online ca să te ajute să găsești ceea ce cauți și lucrurile astea sunt foarte tari. Poți să miști, să mărești și poți să micșorezi... și poți căuta lucruri... De vreme ce acum sunt în Barcelona acum o să caut Sagrada Familia care este o biserică foarte frumoasă. Asta e de fapt HTML/CSS... și JavaScript. Lasă-mă să-ți arăt z-index-ul care e folosit aici. Toate elementele diferite pe care le vedem au fost poziționate folosind CSS ca să fie unele peste altele și folosesc z-index într-un mod foarte specific pentru a se asigura că ordinea este corectă așa că lasă-mă să folosesc consola de Chrome să-ți arăt câteva lucruri. Acestă mini-hartă de aici din colț are pozition: absolute, bottom: 0, left: 0 și z-index: 1. Asta ar trebui să o pună deasupra ceva cu z-index: 0. Acest 'card plutitor' care apare și are aceste opțiuni aici are pozition: fixed; și z-index:10 așa că apare deasupra a multe lucruri. Butonul de zoom are z-index: 2. Asta înseamnă că apare sub 'cardul plutitor'. Să mutăm asta aici și să vedem ce se întâmplă. Vezi! Cardul care apare, apare peste acel zoom. Pentru că el are z-index: 4 și butonul zoom are z-index: 2. Așa cum poți vedea, Google Maps folosește foarte mult CSS și z-index ca să ordoneze toate hățile și controalele desupra lor. Folosește totuși o mult CSS și JavaScript deasemenea, dar este foarte frumos că acum poți începe să înțelegi cum sunt construite alte website-uri care nu seamnănă deloc cu cele pe care le-am arătat până acum. Acesta este puterea CSS-ului.