top: 100px; left: 100px; padding: 1em; border: 1px solid #cc0000;
Ez az alapértelmezett. Ott jelenik meg az elem, ahol éppen tartunk a dokumentumban. Ennél az értéknél a bal és a fenti pozíció megadás (lásd lejjebb) figyelmen kívül lesz hagyva.
... ... <body> ...Az eredmény:A dokumentumban itt tartunk.
Példa a statikus pozicionálásra.
... </body>
A dokumentumban itt tartunk.
... ... <body> ...Az eredmény:A dokumentumban itt tartunk.
Példa a relatív pozicionálásra.
Ez a következő bekezdés.
... </body>
A dokumentumban itt tartunk.
Ez a következő bekezdés.
Figyeljük meg, hogy a Példa-val kezdődő rész milyen közel került a az előző bekezdéshez a -20px-es eltolás miatt, míg a szöveg a 20px left eltolás miatt beljebb kezdődik a margótól.
Miért került lefelé olyan távol a következő sor? Azért, mert a helyzetét úgy számolja ki a Böngésző, mintha nem alkalmaztunk volna relatív pozicionálást.
Az abszolút (absolute) érték esetén szintén a statikushoz hasonló helyre kerül az elem. Megadhatjuk az elhelyezkedését (left, top, bottom, right), a méreteit (width, height). Ez az elem kikerül a megjelenítés folyamából, a következő elem oda kerül, ahova ez került volna.
Készítünk egy világosszürke hátterű DIV-et, amelynek a helyzete relatív pozicionálású (csak a left és top értékeket adhatjuk meg). Ehhez a DIV-hez képest készítünk még egy sárga hátterű DIV-et, amely a helyzetét a befoglaló elemhez képest állandóan (abszolút) megtartja. Azaz ha megváltoztatjuk a szürke DIV helyzetét, akkor vele együtt fog mozdulni a sárga DIV is.
... ... <body> ...Az eredmény:Alap... </body>Abszolút helyzetű DIV
| Érték | Leírás |