b{}xm{}dels.toxin.hu

Saját rétegezési kontextusba akarsz helyezni egy float-olt vagy normális szövegfolyambeli elemet, vagy lehetséges legközelebbi pozicionált őssé akarod tenni, esetleg megakarod változtatni a pozícióját anélkül, hogy eltávolítanád a szövegfolyamból(ezzel megváltoztatva eredeti megjelenítését,formáját). Igen, akkor a te választásod a relatív pozicionálási modell lesz. (lehet, hogy ebben a stílusban kéne az egész lapot írni )

Általános minta a következő

SELECTOR { position:relative; z-index:+VALUE;
left:auto; top:auto; }

• saját kontextus a position:relative beállításával jön létre
•  az elem pozíciója a z-tengely mentén a z-index beállításával szabályozható
• a left és top CSS attribútumot használhatjuk az elem pozíciójának megváltoztatására, ennek állítása nem befolyásolja a többi elem pozícióját vs az abszolút modellével. Mindkét érték alapértelmezése: auto ekkor az elem pozíciója a normális szövegfolyamban elfoglalt pozíciójával egyezik meg
• ahogy már volt róla szó, ekkor a benne lévő abszolút pozicionált elemek hozzá képest kerülnek megjelenítésre, az-az pozicionált őssé válik

E modellel kapcsolatban meg kell jegyezni, hogy ie böngészők(ie8beta1-ben már nem) alatt annak hasLayout(következő cikk) -ra épülő megjelenítési modellje miatt : az ezzel a tulajdonsággal rendelkező elemek és gyermekelemei önálló ‘ablakban’ ill. annak saját rétegében kerülnek megjelenítésre. Emiatt a példában szereplő ‘Relatív inline elem’ nem tud ‘kitörni’ a ‘Relatív blokk’ rétegéből hiába nagyobb annak z-index tulajdonsága mint az ‘Abszolút elem’-nek, alatta marad, amennyiben nem pozicionált elemben helyezkedik el(felső ábra) akkor persze az előbbiek nem érvényesek, a megjelenítés megegyezik a többi böngészőével.

Hajrá CSS