A CSS pozícionálás több, mint csak X, Y koordináták
A CSS pozícionálás már régóta fontos része a weboldal elrendezésének. Még az újabb CSS elrendezési technikák, például a Flexbox és a CSS Grid esetében is, a pozícionálás még mindig fontos helyet foglal minden webes tervező táskájában.
A CSS pozícionálás használatakor az első dolog, amit meg kell tennie, a CSS-tulajdonságot kell létrehoznia a pozícióhoz, hogy megmondja a böngészőnek, ha abszolút vagy relatív helymeghatározást szeretne használni egy adott elem számára. Szintén világosan meg kell értened a különbséget a két pozicionáló tulajdonság között.
Míg az abszolút és relatív a webes tervezés leggyakrabban használt két CSS pozíciójellemzője, valójában négy állapot van a pozíció tulajdonságához:
- statikus
- abszolút
- relatív
- rögzített
A statikus az alapértelmezett pozíció a weboldal bármely eleméhez. Ha nem határozza meg az elem helyét, akkor statikus lesz. Ez azt jelenti, hogy megjelenik a képernyőn, attól függően, hogy hol található a HTML dokumentum, és hogyan jelenik meg a dokumentum normális áramlásán belül.
Ha a statikus pozícióval rendelkező elemre olyan helymeghatározási szabályokat alkalmaz, mint a felső vagy a bal oldalon, akkor ezeket a szabályokat figyelmen kívül hagyja, és az elem továbbra is ott marad, ahol megjelenik a normál dokumentumáramlás. Valójában ritkán, ha valaha is, egy elemet kell beállítania a statikus pozícióhoz a CSS-ben, mivel ez az alapértelmezett érték.
Abszolút CSS pozicionálás
Az abszolút pozícionálás valószínűleg a legegyszerűbb CSS pozíció, amelyet megérteni kell. Ezzel a CSS pozíció tulajdonsággal kezdődik:
pozíció: abszolút;Ez az érték azt mondja a böngészőnek, hogy bármit is elhelyezni kell, el kell távolítani a dokumentum normális áramlásából, és helyette az oldal pontos helyére kell helyezni. Ezt az elem legközelebbi, nem statikusan elhelyezett őse alapján számítják ki.
Mivel egy teljesen elhelyezett elemet kivonunk a dokumentum normális áramlásából, ez nem befolyásolja, hogy az elemek mielőtt vagy azt követően a HTML-ben a weboldalon helyezkedjenek el.
Példaként - ha volt egy megosztottsága, amelyet viszonylagos viszonyt használva értékeltünk (röviden meg fogjuk tekinteni ezt az értéket), és ezen a részlegen belül volt egy bekezdés, amelybe a felosztás tetejéről 50 képpontot akarsz elhelyezni, akkor ehhez hozzá kell adni az "abszolút" pozícióértéket a bekezdéshez, valamint egy 50px offset értéket a "top" tulajdonságnál.
pozíció: abszolút; top: 50px;Ez az abszolút pozícionált elem akkor mindig 50 képpontot jelenít meg a viszonylag elosztott rész tetejétől - függetlenül attól, hogy mi más jelenik meg a normál áramlásban. Az Ön "abszolút" pozícionált eleme a viszonylag elhelyezett kontextusát használja, és a pozíció értéke, amit használ, relatív.
A rendelkezésre álló négy pozicionálási tulajdonság a következő:
- felső
- jobb
- alsó
- balra
Használhatja a felső vagy az alsó részt (mivel egy elem nem helyezhető el mindkét érték szerint), és jobb vagy bal oldalon.
Ha egy elem abszolút helyzetbe van állítva, de nincs olyan nem-statikailag elhelyezett őse, akkor a testelemhez képest helyezkedik el, ami az oldal legmagasabb szintű eleme.
Relatív pozicionálás
Már említettük a relatív helymeghatározást, ezért most nézzük meg ezt a tulajdonságot.
A relatív pozícionálás ugyanazt a négy pozicionálási tulajdonságot használja, mint az abszolút pozícionálást, de az elem pozíciójának a legközelebbi, nem statikusan elhelyezett őse fölé helyezésénél attól kezdve indul el, ahol az elem lenne, ha még mindig normális áramlásban lenne.
Például ha három oldala van a webhelyén, és a harmadiknak van egy "pozíció: relatív" stílust rajta, akkor a pozícióját az aktuális pozíciója alapján ellensúlyozza.
1. bekezdés
2. bekezdés
3. bekezdés.
A fenti példában a harmadik bekezdés a tartályelem bal oldalán helyezkedik el, de még mindig az első két bekezdés alatt marad. A dokumentum normális áramlásában maradna, és csak enyhén ellensúlyozható. Ha megváltoztatta a helyzetbe: abszolút; bármi mást követne a tetején, mert nem lenne többé a dokumentum normális áramlásában.
A weboldal elemeit gyakran használják a pozíció értékének beállításához: viszonylagos, nincs beállítva eltolódási érték, ami azt jelenti, hogy az elem pontosan ott marad, ahol normális áramlásban jelenne meg. Ezt csak azért hozza létre, hogy az elemet olyan kontextusként határozza meg, amely ellen teljesen más elemek helyezhetők el. Például, ha a teljes tartalommal rendelkező "konténer" (ami a webes tervezés nagyon gyakori forgatókönyve) körvonalazódik, akkor az adott részleg viszonylagos helyzetbe állítható úgy, hogy bármi belsejében használható mint pozícionáló kontextus.
Mi a helyzet a fix pozícionálással?
A rögzített pozícionálás sokat hasonlít az abszolút pozícionáláshoz. Az elem pozícióját ugyanúgy kell kiszámítani, mint az abszolút modellt, de rögzített elemeket az adott helyszínen rögzítenek - majdnem vízjelként . Az oldalon lévő minden más az adott elem mögött.
A tulajdonság értékének használatához a következőket állíthatja be:
pozíció: fix;Ne feledje, hogy amikor egy elemet helyreállít a webhelyén, akkor a weboldal kinyomtatásakor ott fog nyomtatni. Ha például az eleme az oldal tetején van rögzítve, akkor minden nyomtatott oldal tetején megjelenik - mert az oldal tetejére van rögzítve. A nyomtatott oldalak rögzített elemek megjelenítésének módjáról a médiatípusok segítségével módosíthatja a következőket:
@media képernyő {h1 # first {pozíció: fix; }} @media print {h1 # first {pozíció: statikus; }}Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 17/7/16.