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

Dacă sunteţi în spatele unui filtru de web, vă rugăm să vă asiguraţi că domeniile *. kastatic.org şi *. kasandbox.org sunt deblocate.

Conţinutul principal
Ora curentă:0:00Durata totală:2:13

CSS în sălbăticie: Google Maps

Transcript video

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.