Static Pozicionálás
Alapvető viselkedés
A static elemek a normál dokumentumfolyamban maradnak, egymás után következnek.
Nem lehet őket elmozdítani top, right, bottom, left tulajdonságokkal.
↓ Dokumentumfolyam iránya ↓
Static 1
Static 2
Static 3
.static-doboz {
position: static; /* Alapértelmezett pozicionálás */
top: 50px; /* nem működik */
left: 50px; /* nem működik */
/* A top, right, bottom, left tulajdonságok itt hatástalanok */
}
Különböző méretű elemek viselkedése
A static elemek akkor is a dokumentumfolyamot követik, ha különböző méretűek.
Mindig kitöltik a rendelkezésre álló szélességet és egymás után következnek.
Szélesebb doboz
Kisebb doboz
Magasabb doboz
.szeles-doboz {
position: static;
width: 200px;
}
.kis-doboz {
position: static;
width: 100px;
height: 80px;
}
.magas-doboz {
position: static;
width: 150px;
height: 150px;
}
Inline vs Block viselkedés
A static pozicionálás megtartja az elemek eredeti megjelenítési módját (display tulajdonságát).
Az inline elemek egy sorban, a block elemek új sorban jelennek meg.
Inline 1
Inline 2
Inline 3
Block 1
Block 2
.inline-doboz {
position: static;
display: inline-flex;
}
.block-doboz {
position: static;
display: block;
}
Relative Pozicionálás
Az eredeti hely megmaradása
A relative pozicionálású elem elmozdul, de az eredeti helyét fenntartja a dokumentumban.
A szaggatott keret az elem eredeti pozícióját jelzi, más elemek ezt a helyet továbbra is "foglaltnak" tekintik.
Előtte lévő doboz
Utána lévő doboz
.relative-doboz {
position: relative;
left: 150px; /* Jobbra mozdítás az eredeti pozíciótól */
top: 20px; /* Lefelé mozdítás az eredeti pozíciótól */
/* Az elem elmozdul, de helye foglalt marad */
}
Elmozdulás különböző irányokba
A relative pozicionálású elemeket négy irányba mozgathatjuk: top, right, bottom, left.
A pozitív értékek jobbra és lefelé, a negatív értékek balra és felfelé mozdítják az elemet.
right: -100px
left: 100px
top: 100px
bottom: -100px
.jobbra {
position: relative;
right: -100px; /* Negatív érték balra mozgat */
}
.balra {
position: relative;
left: 100px; /* Negatív érték jobbra mozgat */
}
.fel {
position: relative;
top: -100px; /* Negatív érték felfelé mozgat */
}
.le {
position: relative;
bottom: -100px; /* Negatív érték lefelé mozgat */
}
Absolute Pozicionálás
Kikerülés a dokumentumfolyamból
Az absolute pozicionált elem teljesen kikerül a dokumentumfolyamból.
A többi elem úgy viselkedik, mintha az absolute elem ott sem lenne.
Első doboz
Absolute elem
Második doboz
Harmadik doboz
.absolute-doboz {
position: absolute;
top: 50%;
right: 50px;
/* Az elem kikerül a dokumentumfolyamból */
/* A többi elem úgy helyezkedik el, mintha ez nem is létezne */
}
Pozicionált szülőhöz viszonyítás
Az absolute elem a legközelebbi pozicionált (nem static) szülőhöz viszonyítva helyezkedik el.
Ha nincs ilyen szülő, akkor a dokumentum gyökeréhez viszonyít.
← Ez a szülő position: relative tulajdonsággal rendelkezik
↗ Jobb felső
↙ Bal alsó
Középen
.pozicionalt-szulo {
position: relative; /* Ez teszi lehetővé, hogy az absolute
gyerekek hozzá viszonyítsanak */
}
.jobb-felso {
position: absolute;
top: 0;
right: 0;
}
.bal-also {
position: absolute;
bottom: 0;
left: 0;
}
.kozepen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Fixed Pozicionálás
Fixed pozíció a viewporthoz képest
A fixed pozicionálású elem a viewport-hoz (böngészőablakhoz) képest rögzített helyzetben marad,
függetlenül a görgetéstől. Gyakran használjuk navigációs sávokhoz, cookie figyelmeztetésekhez.
.fixed-doboz {
position: fixed;
top: 20px;
right: 20px;
/* Az elem a viewporthoz képest fix pozícióban marad */
}
Fixed header és footer használata
A fixed pozicionálást gyakran használjuk fejléc és lábléc rögzítésére.
A tartalom görgethetően megjelenik közöttük.
Fixed Header
Görgethető tartalom...
A header és footer fix marad.
Normál doboz a folyamban
További tartalom...
Fixed Footer
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.fixed-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
Sticky Pozicionálás
Sticky alapműködés
A sticky elem kezdetben normálisan viselkedik, majd amikor eléri a megadott pozíciót (pl. top: 0),
"odaragad" és ott marad, amíg a szülő konténere látható.
.sticky-doboz {
position: sticky;
top: 0;
/* Az elem "ragad" amikor eléri a top: 0 pozíciót */
/* Amint a szülő konténer elhagyja a viewportot,
a sticky elem is vele görgetődik */
}
Sticky kategória fejlécek
Gyakori felhasználási eset: hosszú listáknál a kategória fejlécek "ragadósak" maradnak,
amíg az adott kategória elemei látszódnak.
.category-header {
position: sticky;
top: 0;
/* Minden kategória fejléc ragadós lesz */
/* Amint az új kategória eléri a tetejét,
az előző eltűnik és az új "ragad" oda */
}
Több sticky elem különböző pozíciókban
Több sticky elem is lehet egy konténerben, különböző pozíciókkal.
Például oldalsáv elemei, amelyek különböző távolságokban "ragadnak".
.sticky-top-0 {
position: sticky;
top: 0;
}
.sticky-top-140 {
position: sticky;
top: 140px;
}
.sticky-top-280 {
position: sticky;
top: 280px;
}
/* A sticky elemek egymástól függetlenül működnek,
de figyelni kell, hogy ne takarják egymást */