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
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.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.
Az oldal szövegrétegének mindig van a z-index értéke. egyenlő 0 (nulla) értékkel. Ezért a címke
A fenti példában a címke
A bekezdés ezután felfelé mozog, hogy elfoglalja a címke felszabadult helyzetét
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"