b{}xm{}dels.toxin.hu

A margók általi pozicionálási lehetőségeket kimerítettük, új sorozatot kezdünk, megvizsgáljuk milyen további eszközök állnak rendelkezésünkre ahhoz, hogy megváltoztassuk egy elem megjelenítési pozícióját.

Mivel e bejegyzésben szereplő minta a relatív pozicionált elemekről szól, az esetleges meglepődések elkerülése érdekében, érdemes továbbolvasás előtt végigkattintani az e témához kapcsolódó bejegyzéseket .

Kétfajta típusú elemen lehetséges relatív pozicionált modellt alkalmazni, az első csoportba a statikus(static), a másodikba az úsztatott(float) elemek tartoznak. Mindkét típus azonos szinten lévő megjelenítési rétegben helyezkedik el: előbbiek a normál szövegfolyam, utóbbiak az úsztatott elemek rétegében. E bejegyzésben szereplő minta segítségével ezen elemek megjelenítési pozícióját változtathatjuk meg -jobb,bal,fel,le irányokban- úgy hogy közben, az előbbi bejegyzésben szereplő ‘Abszolút és rögzített pozíciójú elemek eltolása margók segítségével’ mintával ellentétben, a mintát alkalmazó elemek megjelenése (size, line breaks, line-spacing, stb. tulajdonsága ) nem, valamint a többi elem pozíciója sem módosul.

Általános minta a következő:

SZELEKTOR {position:relative; top:±ÉRTÉK; left:±ÉRTÉK;
z-index:+ÉRTÉK }

A mintát alkalmazó elemek pozíciója – a bevezetőben szereplő tulajdonságok érvényesülése mellett-, a top,left CSS tulajdonságok pozitívra állítása esetén: lefelé-jobbra, míg negatív érték használata esetén felfelé-balra módosul. Előbbi két tulajdonság állítása, a margin CSS tulajdonsággal ellentétben, nem befolyásolja a környező elemek megjelenítési pozícióját.

Az elemek között átfedés(overlap) létrejöhet, a megjelenítési sorrend ill. az elemek z-tengely menti elhelyezkedése a z-index CSS tulajdonság segítségével állítható be, figyelembe véve a következőket, amennyiben

• és alapesetben, z-index:auto, ekkor a relatívan pozicionált elem, elemi csoportot(atomic group) képez, ilyenkor külső elemek nem rétegződhetnek be az ő statikus leszármazottjai(descendants), inline tartalma, és háttere közé
• z-index:+ÉRTÉK, ekkor a relatívan pozicionált elem már önálló rétegzési csoportot(stacking context) alkot, ergo semmilyen elem – pozicionált sem – rétegződhet be az ő leszármazottjai(descendants) közé

Remélem senkinek nem okoz meglepetést már, hogy egy elem nem lehet relatívan és abszolút vagy fixen pozicionált egyidőben.

(Végre), elkészült a mintához tartozó példafájl is, azonosan megjelenítettnek tűnik , ie6,7,fx2,opera,safari alatt is.

Hajrá CSS ui: kezd a dolog érdekessé válni, végre … , egyébiránt aki hasznosnak ítéli meg a cikkeket, tekintse meg a hirdetéseket is lejjebb, biztos roppant érdekesek