A lépcsőzetes stíluslapok elkészítése előtt korlátozottan ellenőrizheted a webhelyén lévő objektumok helyzetét. Használhatja a HTML táblát a pozicionálás kissé történő irányításához, de ez nem volt túl pontos. A CSS használatával pontos ellenőrzés alatt áll az egyes elemek elhelyezkedése a weboldalon.
Mielőtt felhasználhatná a CSS pozíció tulajdonságát az elemek pozicionálására a weboldalán, meg kell vitatnunk a webböngészővel való kommunikációhoz használt terminológiát. A CSS nemcsak az Ön weboldalának szélességét és magasságát, hanem a böngésző méreteit is figyelembe veszi.
- Böngésző szélessége és magassága
Először azt gondolhatja, hogy ez a nyitott böngészőablakra vonatkozik. De valóban a teljes böngészőre vonatkozik, beleértve a vezérlőket és a gombokat.
- Élő szélesség és magasság
Ez a kifejezés a böngésző megjelenítési területén. Nem tartalmazza a vezérlőket.
- A dokumentum szélessége és magassága
Ez a weboldal teljes szélessége és magassága. Ha ezek a méretek meghaladják az élő szélességet és magasságot, akkor a böngésző szükség szerint megjeleníti a görgetősávokat. Most, hogy ismeri a határok feltételeit, amelyekben el tudja helyezni weboldalának részeit a CSS segítségével, nézzük meg a négy helyzetértéket.
- Statikus
Ez az alapértelmezés. Ha az elemre másként nem ad meg, a böngésző statikus pozicionálást fog használni. Csakúgy, mint amilyennek hangzik, statikus elhelyezéssel nem lehet áthelyezni az elemeket a weboldalon. Tehát hogyan határozza meg a böngésző, hogy hol helyezze el az egyes objektumokat a weboldalán? Az elemeket abban a sorrendben helyezi el, amelyik a HTML-kódban megjelenik. Ha van logóképe, akkor üdvözlet és ezután a HTML-ben a szerzői jogi megjegyzés, a böngésző ezeket a sorrendben helyezi el a weboldalra. Az üdvözlet nem mozgatható a logókép fölé.
- Relatív
A relatív pozicionálás ugyanúgy működik, mint a statikus, mivel a HTML-kódban az elemek sorrendje szabályozza az elemek áramlását az oldalon. Azonban a relatív pozicionálás segítségével ellenőrizheti az elem helyzetét a weboldal többi eleméhez viszonyítva.
- Abszolút
Ha abszolút pozicionálást használ egy elemmel, ez az elemet függetleníti a weboldal többi részétől. Mivel az elhelyezést már nem határozza meg a HTML sorrendje, X és Y koordinátákat kell használnia az elem elhelyezéséhez.
- Rögzített
Ez ugyanúgy működik, mint az abszolút pozicionálás. A rögzített helyzetű elem azonban nem görgeti a weboldalt. Ez egy szép funkció olyan logóhoz vagy menühöz, amelyet továbbra is láthatónak szeretne hagyni, amikor az oldal felfelé görget.
|