A HTML elemek helyzete létfontosságú szerepet játszik a weboldal összetevőinek rendszerezésében. Pontosabban, az elemek helyzete a CSS használatával állítható. pozíció ' ingatlan. Ez a tulajdonság társítható eltolási tulajdonságokkal, például felső, bal, jobb és alsó tulajdonságokkal, amelyek meghatározott értékeket biztosítanak az elem beállításához az oldalon. Azonban a ' abszolút ” elhelyezett elemek a legközelebbi elhelyezett elemhez képest állíthatók.
Ez a bejegyzés elmagyarázza a CSS abszolút pozicionálását.
CSS „pozíció” tulajdonság
Az ' pozíció ” tulajdonság a CSS-ben használható az elem pozíciójának beállítására. A pozíciótulajdonság különböző értékei: fix, abszolút, relatív, statikus és ragadós. Ezek az értékek az eltolási tulajdonságokkal vannak beállítva, például felül, jobb, bal és lent, az elem helyzetének beállításához.
Hogyan kell alkalmazni az abszolút CSS pozicionálást?
Az elem abszolút pozicionálása a CSS segítségével alkalmazható pozíció ' ingatlan ' értékkel' abszolút ”. Az abszolút pozíciójú elemet a legközelebbi elhelyezett szülőelemnek megfelelően állítjuk be. De ha az ős nincs elhelyezve, akkor a dokumentum törzsrészéhez képest igazodik.
Példa
Értsük meg a fogalmat egy gyakorlati példán keresztül.
1. lépés: Hozzon létre egy HTML-fájlt
A HTML fájlban a body elemben adjon hozzá egy div elemet az osztálynévvel ' fő- ”. Ezután a létrehozott div-ben adjon hozzá egy HTML címkét a következő attribútumokhoz:
-
- ' src ” linket biztosít a képhez.
- ' osztály ” a CSS-ben az elemek stílusára szolgál.
- ' minden ” attribútum azt a szöveget adja meg, amely akkor jelenik meg a kép helyén, ha a kép nem töltődik be az oldalon.
- ' minden ” attribútum azt a szöveget adja meg, amely az oldalon megjelenik a kép helyén, ha a kép nem töltődik be az oldalra.
Ezután adjon hozzá egy másik div elemet, amely tartalmazza a címsort és a bekezdés h1 és p elemeit:
< div osztály = 'fő' >< div osztály = 'tartalom' >
< img src = 'images/linuxlogo.png' osztály = 'itthon' minden = 'Linux logó' szélesség = '80px' >
< h1 > A CSS abszolút pozicionálás h1 >
< p > Hello Linuxhint csapat! ! p >
div >
div >
A CSS-ben számos stílustulajdonságot használnak a HTML-elemek díszítésére.
2. lépés: Stíluszzon „összes” elemet
* {font-család: Verdana, Genf, Tahoma, sans-serif;
}
A HTML elemek stílusa a ' betűtípus család ' ingatlan ' értékkel' Verdana, Genf, Tahoma, sans-serif ”. Ez az értéklista biztosítja, hogy ha a böngésző nem támogatja az első stílust, akkor a másikat alkalmazza.
3. lépés: Stílus „otthon” div
.itthon {pozíció: abszolút;
felső: 50 képpont;
balra: 45px;
}
Az alábbiakban a „ itthon ” div:
-
- ' pozíció ” tulajdonság határozza meg az elem pozícióját. Itt a hozzáadott „ abszolút ” az elemet a HTML törzsrészéhez viszonyítva helyezi el.
- ' tetejére ” tulajdonság az elem függőleges beállítására szolgál.
- ' bal ” tulajdonság az elem vízszintes beállítására szolgál.
4. lépés: Stílus „tartalom” div
.tartalom {háttérszín: kadetkék;
szélesség: 300 képpont;
magasság: 250 képpont;
padding-bal: 40px;
margó-bal: 80 képpont;
}
Alább láthatók a CSS-tulajdonságok, amelyek a „ tartalom ” div:
-
- ' háttérszín ” tulajdonság beállítja az elem háttérszínét.
- ' szélesség ” tulajdonság beállítja az elem szélességét.
- ' magasság ” tulajdonság beállítja az elem magasságát.
- ' padding-bal ” tulajdonság úgy van beállítva, hogy helyet adjon az elem tartalmának bal oldalán.
- ' margó-bal ” tulajdonság határozza meg az elem bal oldalán lévő helyet.
Ezen a ponton a weboldalunk így fog kinézni:
A fenti eredményből látható, hogy a div home képe felülről 50 képpontra, balról pedig 45 képpontra van elhelyezve a dokumentumtörzstől. Ezenkívül a home div pozíciója a HTML törzsrészéhez képest van beállítva.
Hogyan állíthatjuk be az elem pozícióját a pozicionált szülőelemhez viszonyítva?
Ez a rész végigvezeti Önt az elem helyzetének a legközelebbi szülőelemhez viszonyított beállításához.
Set “position” A “content” div
pozíció: relatív;
Az elem helyzetének beállításához a szülőelemhez képest állítsa be a „ pozíció A szülő elem ' tulajdonsága a ' relatív ” értékét.
Állítsa be a „pozíciót” Az „img” elem tulajdonsága
.itthon {pozíció: abszolút;
felső: 100 képpont;
balra: 220 képpont;
}
Itt:
-
- ' pozíció ' tulajdonság, amelynek értéke ' abszolút ” lesz elhelyezve a szülőelemhez képest (vagyis a tartalom div pozíciója a relatív értékkel van beállítva).
- ' tetejére ” tulajdonság az elem pozíciójának felülről történő beállítására szolgál.
- ' bal ” tulajdonság az elem helyzetének balról történő beállítására szolgál.
Kimenet
Az eredményből látható, hogy a kép a szülő div-hez képest van elhelyezve, és megfelelőnek tűnik.
Következtetés
A CSS' pozíció ” tulajdonságot használják a HTML elemek pozíciójának beállítására. Ez a tulajdonság lehet rögzített, relatív, abszolút, ragadós és statikus. Az ' abszolút ” érték az elemet a közelben elhelyezett szülőelemnek megfelelően pozicionálja. Ez a bejegyzés gyakorlati példával magyarázza a CSS abszolút pozicionálást.