Elemek elhelyezése egy weboldalon a CSS pozíciótulajdonsággal

Lehet 5, 2024

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.

Video Utasításokat: CSS Efecto - 02 PseudoElementos @JoseCodFacilito (Lehet 2024).

Elemek pozicionálása egy weboldalon a CSS pozíciótulajdonságokkal, HTML, CSS, CSS pozíciótulajdonságok, statikus pozicionálás, relatív pozicionálás, abszolút pozicionálás, rögzített pozicionálás, az elemek elhelyezése a weblapon, a CSS használatával az elemek pozicionálása a weboldalon

Előző Cikk

Következő Cikk

Kapcsolódó Cikkek

számítógépek

Digitális darabokat eladni - online áruházak keresése

Lehet 2024

Az elmúlt évben kutattam, hogyan lehet online értékesíteni a digitális hulladéktermékeket, és nagyon sokat tanultam. De amikor elkezdtem, nagyon szerettem volna, ha az összes információ egy helyen...

számítógépek

A Sims Online

Lehet 2024

Az utolsó, 2002-ben kiadott MMORPG a The Sims Online volt, két hihetetlenül népszerű játéktípus egyesítése. Mennyire voltak jól? Először is nagyon jó munkát végeztek a sim környezet online játékra...