Elemek abszolút és viszonylagos elhelyezése az oldalon - Webhelyt szeretnék

Az elemek abszolút és viszonylagos elhelyezése az oldalon

Nagyon fontos, hogy egy kezdő webmester ne csak a HTML nyelvet tanulja meg. megtudhatja, hogyan kell megfelelően alkalmazni a címkéket a weblap elrendezéséhez. hanem megérteni az ideológiát. amely szerint ez a weboldal megalakul.

A weboldalon található tartalom általában abban a sorrendben jelenik meg, amelyben HTML-kódolásra kerül. Ezenkívül az elemek balra vagy jobbra elmozthatók egy oldalra, a körülöttük megjelenő szöveggel, valamint egy objektum pozícionálását képpont pontossággal vezérelheti a stílus tulajdonságaival.

Az oldal helyes elhelyezése érdekében az elemnek egy abszolút vagy relatív értékű pozíció tulajdonsággal kell rendelkeznie. Ezután az elem bárhová pontossággal elhelyezhető a megfelelő bal tulajdonságokkal. tetején. és a z-index.

Objektumok relatív elhelyezése

A címke helyzetének megváltoztatásához hozzárendelhet egy pozíciót: relatív stílus. A pozícióval: relatív, a címke helyzete az eredeti pozíciójától megváltoztatható. A bal tulajdonság határozza meg azt a képpont távolságot, amelyre az elem a normál vízszintes helyzetből indul; a felső tulajdonság határozza meg azt a képpont távolságot, amelyre az elem a normál függőleges helyzetéből indul.

A megadott érték pixelben pozitív vagy negatív lehet. A bal tulajdonság pozitív értéke az elemet jobbra és negatív értékre tolja balra. A felső tulajdonság pozitív értéke az oldalt lefelé mozgatja az elemet és a negatív értéket felfelé.

Az alábbi példában a kifejezés minden egyes szó különálló tárolóba van zárva


Azt akarom
háló
-
weboldal

Elemek abszolút és viszonylagos elhelyezése az oldalon - Webhelyt szeretnék

Ennek eredményeként a szavak eltolódnak a normál függőleges pozíciójukhoz képest. Nem határoztam meg a szavak helyzetét vízszintesen, mivel alapértelmezésben a címkék egymás mellé rendezve vannak. A szó pozíciója csak függőlegesen változik a normál függőleges igazításhoz képest.

Nagyon fontos megérteni, hogy viszonylagos helymeghatározás (relatív) használata esetén a weboldalon lévő hely továbbra is az eredeti pozícióban lévő elem számára van fenntartva. függetlenül attól a ténytől, hogy e helyről költözött. És a címke eredeti mérete és pozíciója az oldal elemeinek adatfolyamában van tárolva, most elfoglalva a szabad hely, ahol a címke normálisan megjelenik. De nem csak ez, a következő címke megtartja pozícióját az áthelyezett címke eredeti pozíciójához képest.

Bár az oldalelemek függőlegesen mozognak eredeti helyükről kisszámú képpontra, a szabad terület problémák általában nem jelentenek problémát. Az oldalelemek áramában lévő függőleges távolság növelésével azonban egy szabad terület jelenik meg, ami a korábban eltolt elemnek a bal oldali területet jelenti. Mindig emlékeznie kell erre, és ellenőriznie kell az objektumok elhelyezését, hogy pontosan ott helyezkedjenek el, ahol a webmester tervezett.

Abszolút pozícionálás

Míg a pozíció: relatív helyezi az elemet a környező elemekhez viszonyítva, pozíció: abszolút helyezi az elemet a konténerelemhez képest. Alapértelmezés szerint a tartályelem maga a weboldal, a címke . Ezért az elemek a weblap bal felső sarkához viszonyítva teljesen el vannak helyezve, és kizárják a szokásos elemfolyamból.

Szeretnék egy weboldalt

Az e bekezdés szerint elhelyezett "I want a website" kifejezést,
amelyet a div címke határoz meg. Ez a címke a fenti bekezdés előtt található HTML kódban jelenik meg.
Teljesen elhelyezett; ezért kizárják az oldalelemek normális áramlásából.
Az oldalelemek adatfolyamából származó címke kivételével kapcsolatban a bekezdés felfelé mozog,
hogy elfoglalja a felszabadított oldal helyét, ezért fel van tüntetve a kifejezésre.
Így a "Webhelyt akarok" kifejezés abszolút pozíciót foglal el az oldalon,
nem számít, mi más körülveszi. Számára a z-index értéke is meg van adva. egyenlő -1,
elhelyezve az oldalra egy szövegréteg alatt, hogy a szó ne legyen átfedve a szöveggel.


Elemek abszolút és viszonylagos elhelyezése az oldalon - Webhelyt szeretnék

Az oldal szövegrétegének mindig van a z-index értéke. egyenlő 0 (nulla) értékkel. Ezért a címke

a z-index értéke be van állítva. -1, a szókombináció egy szövegréteg alatt helyezhető el úgy, hogy ne zavarja az észlelést. Ne feledje, kérjük, hogy amikor az oldal eleme teljesen el van helyezve, és a bal és a felső tulajdonságok értékei be vannak állítva. akkor a relatív pozícionálással ellentétben kizárják az oldalelemek normális áramlásából.

A fenti példában a címke

a bekezdés előtt eltávolítják a normális fizikai helyzetéből.

A bekezdés ezután felfelé mozog, hogy elfoglalja a címke felszabadult helyzetét

. Ez azt jelenti, hogy nem számít. ahol az abszolút pozícionálással rendelkező elem az oldalra van kódolva. Függetlenül a tényleges kódolásától, még mindig az oldal bal felső sarkához vagy annak szülőeleméhez képest helyezkedik el.

Az egyetlen eset, amikor a kódolási pozíció akkor fontos, ha az elemet csak a bal oldali tulajdonsága teszi lehetővé. Ha nem mozog vertikálisan, akkor a kódolt helyzetben marad.

A webmesterek gyakran alkalmaznak egy olyan eljárást, amikor az egymáshoz képest elhelyezett elemeket egy másik tartályelemen belül helyezik el.

Ez a tartályelem úgy van elhelyezve, hogy megőrzi pozícióját az oldalelemek áramában, és az abban lévő elemek teljesen a tartály belsejében helyezkednek el.

Ebben az esetben az abszolút pozícióértékek a tárolóhoz viszonyítva kerülnek meghatározásra, nem pedig az oldalra. Ezért a konténer könnyen irányítható koordinátarendszerré válik, amelyben a beágyazott elemek helyesen vannak elhelyezve.

Ha többet szeretne megtudni a rétegek sorrendjének megváltoztatásával a z-index és az objektumok viszonylagos helymeghatározásával, akkor a következő bejegyzést láthatja: "A réteg pozíciójának kezelése a z-indexrel". Nos, az abszolút pozícionálás kérdései a leckében vannak: "A réteg abszolút elhelyezése egy weboldalon"