Gyakran felmerülő kérdés, hogy lehet egy dobozt absolute pozícionálással egy olyan lapszerkezetben elhelyezni, ahol a lap tartalma mindig középen van, tehát a doboznak (nevezzük mostantól reklám doboznak) nem mondhatjuk azt, hogy pl. a böngésző ablakától X távolságra jelenjen meg.
A megoldás: egy relative pozícionált elembe (mostantól nevezzük fejlécnek) kell elhelyezni a reklámdobozt, melynek eredményeként ha a fejléc helyzetét módosítjuk, vele automatikusan a reklám doboz helyzete is változni fog. Nézzük a kódot.
A CSS-ben definiáljuk a fejléc doboz tulajdonságait:
1 2 3 4 5 6 | #fejlec { width: 300px; height: 100px; position: relative; background-color: #999999; } |
A doboz 300px széles és 100px magas lesz, a háttere szürke, és a pozíciója (itt a lényeg) relative.
A HTML kódban így fog kinézni:
1 | <div id="fejlec"></div> |
Most egészítsük ki a CSS-t a reklám dobozra vonatkozó résszel:
1 2 3 4 5 6 7 8 | #reklam { width: 100px; height: 50px; position: absolute; background-color: #000000; left: 10px; top: 10px; } |
A reklám doboz szélessége 100px, a magassága 50px, a pozíciója (itt a lényeg) absolute, a háttérszíne fekete és balról illetve felülről 10px távolságot fog tartani.
A HTML kódot ezután már így kell módosítani:
1 2 3 | <div id="fejlec"> <div id="reklam"></div> </div> |
Mint látható, a reklám doboz a fejléc dobozba DIV-jébe került bele. Tulajdonképpen ennyivel kész is vagyunk, hisz a reklám doboz minden esetben a fejléc dobozon belül fog megjelenni, méghozzá úgy, hogy a fejléc doboz tetejétől és bal oldalától 10-10px távolságot fog tartani.
Mivel a fejléc doboz pozíciójának relative értéket állítottunk be és a reklám doboznak pedig absolute-t, így a reklám doboz számára a 0px (ami egyébként a böngészőablak széleitől számítódna) a fejléc doboz széleitől fog számítódni.
A csatolt fájl kódjában látható, hogy ha a fejléc doboz helyzetét módosítjuk (#fejlec1), akkor vele együtt a reklám doboz helyzete is változni fog.
A reklám doboz helyzetét az alábbiakkal lehet módosítani: top, right, bottom és left.
Ennek megfelelően, ha a reklám dobozt a jobb felső sarokban szeretnéd elhelyezni, akkor a CSS-ben a kódot az alábbi szerint kell módosítani (right-t kell beállítani a left helyett):
1 2 3 4 5 6 7 8 | #reklam { width: 100px; height: 50px; position: absolute; background-color: #000000; right: 10px; top: 10px; } |
A működő kód megtekintése: absolute_pozicionalas.html