1. FEJEZET
Öt érték, három kérdés
A position tulajdonság öt értéke három kérdésben tér el egymástól: foglal-e helyet az elem a normál dokumentumfolyamban, mihez képest mérjük a top, right, bottom, left eltolást, és mozog-e görgetéskor.
| Érték | Helyet foglal? | Az eltolás mihez képest? | Görgetéskor |
|---|---|---|---|
static | igen | nincs eltolás (a top… hatástalan) | a tartalommal mozog |
relative | igen, az eredeti helyén | a saját eredeti helyéhez | a tartalommal mozog |
absolute | nem | a legközelebbi pozicionált ős (nem static) dobozához | az ősével mozog |
fixed | nem | a nézetablakhoz (böngészőablakhoz) | helyben marad |
sticky | igen | a legközelebbi görgető ős látható részéhez | mozog, amíg el nem éri a megadott határt, ott „ragad” – de csak a szülője végéig |
2. FEJEZET
static és relative
Az alapértelmezett static elem a dokumentumfolyamot követi, a top/right/bottom/left értékeket figyelmen kívül hagyja. A relative elem ugyanott foglal helyet, de az eltolással a saját eredeti helyéhez képest elmozdítható – a többi elem nem veszi észre, a helye „foglalt” marad.
Az eltolás tulajdonságai azt mondják meg, melyik oldaltól mennyivel toljuk el az elemet, befelé. Ezért a pozitív top lefelé, a pozitív left jobbra tol – de a pozitív bottom felfelé, a pozitív right balra. A negatív érték mindegyiknél az ellenkező irányba visz.
PRÓBÁLD KI
Eltolás négy irányból
Ha a top és a bottom is meg van adva, a top nyer; ha a left és a right is, akkor (balról jobbra író nyelvben) a left. A fenti példában ezt is kipróbálhatod.
3. FEJEZET
absolute – kiemelve a folyamból
Az abszolút pozicionált elem kikerül a dokumentumfolyamból: a többi elem úgy rendeződik, mintha ott sem lenne. Az eltolást a tartalmazó blokkhoz mérjük: ez a legközelebbi olyan ős, amelynek a position értéke nem static. Ezért adunk a szülőnek gyakran position: relative-ot eltolás nélkül – csak azért, hogy viszonyítási pont legyen. Ha egyik ős sem pozicionált, a kezdeti tartalmazó blokkhoz (az oldal elejéhez, a nézetablak méretében) igazodik.
PRÓBÁLD KI
Mihez igazodik?
Figyeld meg: a két testvér között nincs hézag – az abszolút elem nem foglal helyet. Ha nincs eltolás megadva, az elem ott marad, ahol a folyamban lenne, csak a többiek „nem látják”. Ha a szülőről levesszük a position: relative-ot, az elem a következő pozicionált őshöz, itt a színpadhoz igazodik.
4. FEJEZET
fixed – a nézetablakhoz rögzítve
A rögzített elem a nézetablakhoz igazodik, ezért görgetéskor is ugyanott marad. A mini ablak saját nézetablakkal rendelkezik: görgess benne, és váltsd át a fejlécet és a „fel” gombot absolute-ra, hogy lásd a különbséget.
PRÓBÁLD KI
Görgess a mini ablakban
Kivétel: ha a rögzített elem valamelyik ősének transform, filter vagy perspective tulajdonsága van, a „nézetablak” helyett ahhoz az őshöz rögzül, és vele együtt görgetődik. Ha egy fixed elem „nem marad a helyén”, érdemes ezt ellenőrizni.
5. FEJEZET
sticky – ragadós, de csak a szülőjén belül
A ragadós elem kezdetben a folyamban van, mint egy relative elem. Amikor görgetés közben eléri a megadott határt (pl. top: 0), ott marad – de csak addig, amíg a szülője látszik: a szülő alján „továbbtolja” a következő rész. Ezért ragad mindig a soron következő kategória fejléce.
PRÓBÁLD KI
Ragadós kategóriafejlécek
Ha a sticky nem működik, a leggyakoribb okok: nincs megadva top (vagy bottom); valamelyik ősnek overflow: hidden vagy auto az értéke (akkor az lesz a „görgető” ős); vagy a szülő éppen akkora, mint maga a ragadós elem, így nincs hely, ahol ragadhatna.
6. FEJEZET
Egymás fölött: z-index
Ha a pozicionált elemek fedik egymást, alapesetben a HTML-ben később álló kerül felülre. A z-index ezt felülírja: a nagyobb érték van közelebb hozzánk. Csak pozicionált (nem static) elemekre – és flex/grid elemekre – hat.
PRÓBÁLD KI
Három egymásra csúszó doboz
ÖSSZEFOGLALÁS
Amit érdemes megjegyezni
- Az eltolás tulajdonságai befelé tolnak:
tople,leftjobbra,bottomfel,rightbalra (negatív értékkel fordítva). relative: eltolható, a helye foglalt marad; gyakran csak viszonyítási pont az abszolút gyerekeknek.absolute: nem foglal helyet; a legközelebbi pozicionált őshöz igazodik.fixed: a nézetablakhoz rögzül (kivéve, ha egy ősnektransform-ja van).sticky: határértékig a folyamban mozog, utána ragad – a szülője végéig.z-index: nagyobb érték kerül felülre, csak pozicionált (és flex/grid) elemeknél.