Conţinutul principal
Biblioteca de informatică
Curs: Biblioteca de informatică > Unitatea 2
Lecția 6: Aspect cu CSSCSS în sălbăticie: Google Maps
Vrei să te alături conversației?
Nici o postare încă.
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.