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

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