Fő tartalom
Programozás
Tantárgy/kurzus: Programozás > 2. témakör
6. lecke: CSS elrendezés- CSS csoportosító elemek
- Feladat: Csoportosítók csoportja
- CSS szélesség, magasság és túllógás
- Feladat: Az áradó óceán
- CSS doboz modell
- Feladat: A doboz modell
- CSS pozíció
- Feladat: Helyezkedő bolygó
- CSS a vadonban: Google térkép
- CSS úsztatott elemek
- Feladat: Úszó felhők
- CSS elrendezés-tulajdonságok használata
- Weboldal tervezése
- Projekt: Eseménymeghívó
© 2023 Khan AcademyFelhasználási feltételekAdatkezelési tájékoztatóSüti figyelmeztetés
CSS a vadonban: Google térkép
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.
Videóátirat
Szeretném megmutatni egy valós példán, hogy hogyan lehet z-indexszel
CSS-ben pozicionálni. A példa a Google Térkép lesz. Valószínűleg sokan használjátok
a Google Térképet vagy valamilyen online térkép
szolgáltatást, hogy megtaláljátok azt a helyet,
amit kerestek. Ezek remek dolgok. Körbenézhetünk, belenagyíthatunk, eltávolodhatunk, és
rákereshetünk helyekre. Most épp Barcelonában vagyok, úgyhogy rákeresek a Sagrada Familiára, ami egy gyönyörű templom. Amit itt látsz, az HTML,
CSS és JavaScript. Megmutatom, milyen
z-indexek vannak itt. Minden elemet, amit látsz CSS segítségével pozícionáltak, hogy egymásra kerüljenek, és egy specifikus z-index
tulajdonságot használtak ahhoz, hogy mind megfelelő sorrendben
kerüljenek egymásra. Várj csak, a Chrome fejlesztői eszközök segítségével megmutatok egy pár
dolgot ezzel kapcsolatban. Ennek a sarokban lévő minitérképnek az abszolút pozíciója
alul 0, bal oldalon 0, a z-indexe pedig 1. Ezért ez rákerül azokra az elemekre, amiknek a z-indexe nulla. Ennek a context-menünek – aminél látszik néhány lehetőség – a position értéke fixed,
a z-indexe pedig 10. Ezért ez sok más dolog
felett jelenik meg. A nagyító gombnak a z-indexe 2, ami azt jelenti, hogy a
felugró kártya alatt jelenik meg. Menjünk most egy kicsit odébb,
és nézzük meg mi történik. Látod? A felugró kártya
a nagyító felett jelenik meg. Ez azért van, mert ennek a z-indexe 4, a nagyító gomb z-indexe pedig 2. A Google Térkép sok-sok CSS pozíciót és z-indexet használ arra, hogy elrendezze a térképet és meghatározza,
mi kerül egymásra. Emellett sok más CSS és JavaScript
dolgot is csinál, de egyelőre az is nagyon jó,
ha kezded megérteni hogyan épülnek fel az olyan weboldalak, amik teljesen eltérnek azoktól, amiket eddig néztünk. Pontosan ebben van a CSS igazi ereje!