Ebben a leckében az eddig tanult tartalmak weboldalon belül, illetve egymáshoz képest való elhelyezésével foglalkozunk. A div címkével összefoghatunk több HTML elemet és együtt igazíthatjuk. Tartalmat vízszintesen, függőlegesen, sőt egymás mögé vagy elé is igazíthatunk. Bár nemcsak ezeknek a szakaszoknak lehet háttérképet adni, ebben a leckében próbáljuk ki először a háttérkép beállítását.

Új HTML címkék:
<div> - a weboldal tartalmának egy szakaszát helyezzük ebbe a tag-be. Használatával könnyebben helyezzük és igazítjuk a tartalmakat. Egy másik előnye, hogy külön formázást alkalmazhatunk ezekre a részekre.

Új CSS kulcsszavak ebben a leckében:
position – egy elem elhelyezése egy weboldalon több módon történhet: az eredeti pozíciójához képest eltolva, rögzítve a böngésző ablaknak mindig ugyanazon a részén, az őt tartalmazó szakaszhoz képest. A position tulajdonság ennek a módnak a megadására alkalmas, a helyezéshez újabb CSS kulcsszavak használata szükséges. Lehetséges értékek: static (alapértelmezett), relative, fixed, absolute, sticky.
top, bottom, left, right – ezekkel a kulcsszavakkal lehet pontosan megadni az elem helyét, ha előzőleg tisztázva van az elem helyezési módja a position tulajdonsággal. Nem minden pozicionálásra alkalmazhatóak.
z-index – ezzel a tulajdonsággal állítható az egymásra csúszó elemek fedési sorrendje. Csak az absolute, relative és fixed módon pozícionált elemekre alkalmazható.
background-image – bármilyen HTML elemhez rendelhetünk háttérképet. A kép megadásához a nevére és (relatív) útvonalára van szükség. Az érték formája: url(útvonal/képnév.kiterjesztés);

Példa <div>-vel burkolt szakaszokra:

A fenti weboldal két szakaszt tartalmaz. Mindkettő azonosítóval van ellátva (links és back), hogy különböző formázást alkalmazzunk rá.

A links részen beállított háttereknek (background-color) köszönhetően láthatjuk, hogy a szakasz maga a böngészőablak jobb oldalától a balig tart végig. A linkekre alkalmazott háttér csak a szövegek mögé kerül.

A második szakaszhoz háttérképet adtunk. A kép mérete kisebb, mint a szakasz mérete, de egyéb beállítás hiányában ismételődni fog. A kiválasztott kép olyan, hogy az ismétlődés nem feltűnő. A szélességet nem kellett állítani: széltében teljesen elfoglalja a szakasz az ablakot. A magasság viszont csak akkora lenne, mint a szakasz tartalma: itt a Pattern szó. Ezért van a 80% beállítva: ez a böngésző ablak méretének jelenti a 80%-át.

Mindkét szakasz tartalmaz linket, de mivel a formázásnál a szakasz nevével adtuk meg az <a> címke nevét (#links a és #back) különböző formázást alkalmaztunk rájuk osztály (class) nélkül.

Kiegészítés:

• A legújabb HTML standardban szerepel egy <header> és <footer> címke, amelyet a <div> címke helyett használhatunk a fejléc és lábléc létrehozására. Ugyanígy a <nav> címke a menü szakasz megjelölésére alkalmas. Az ilyen típusú új címkék a weboldal részeinek programok általi (automatizált) azonosítására.
• A képeket háttérképként használni óvatosan kell, mert a szövegek nehezebben olvashatóak képre írva, illetve nehezebb össze illő háttérképeket találni különböző szakaszokra, mint színeket.
• Ha egy szakaszra háttérképet és háttérszínt is alkalmazunk, a kép fog látszani. Ha a képet nem találja a böngésző, akkor látszik a háttér illetve, ha a kép nem tölti ki a szakaszt teljesen.
• A háttérkép, ha kisebb a kitöltendő területnél ismétlődik, ha nagyobb, akkor csak részben jelenik meg. Ha ezen változtatni szeretnénk, a background-repeat és a background-size tulajdonságoknak kellene utána nézni.

Példa rögzített (fixed) pozicionálásra:

A fenti képen a box1 és a box2 azonosítójú szakaszok pozíciója alapértelmezett, azaz statikus, de a box3 szakasz pozíciója rögzített (fixed). A Fixed szöveg és a „doboz” amiben benne van, mindig a böngésző ablak jobb felső sarkában lesz, pontosabban 30 pixelre a jobb és felső szélétől az ablaknak. Ez a helyzet független az ablak méretétől.

Itt a harmadik szakasz szélessége nem tölti ki az ablakot, a mérete a tartalmához igazodik.

Példa az abszolút és relatív pozicionálásra:

A fenti példában az alsó és felső szakaszok (box1 és box3) a statikusak, hivatkozási pontokként szolgálnak, hogy lássuk az alaphelyzethez képest, hogyan mozdul el a másik kettő.
A zöldes hátterű szakasz (box2) relatívan van elhelyezve: a saját eredeti helyzetéhez képest 20 pixellel felfele és 100 pixellel balról van eltolva. Látszik, hogy ez az elmozdítás nem „zavarja” a fölötte levő dobozt.
Az abszolút módon pozícionált kis „doboz” (box4), a zöld dobozban található eredetileg. Abszolút pozicionálással az őt tartalmazó box2-höz képest adjuk meg a helyzetét: 10 pixellel van fennebb függőleges irányban, balra pedig 100 pixellel van bennebb.
A box2 szélessége marad a statikusban megszokott módon, míg a box4 mérete a tartalmához igazodik.
A relatívan elmozdított részekre jellemző, hogy az eredeti helyük üresen marad: a fehér rész a két statikus szakasz között.

Kiegészítés:

• Az egyébként statikusan igazított szakaszokat a böngésző ablakban középre lehet igazítani, ha a margin tulajdonság értékét auto-ra állítjuk. Ez akkor hasznos, ha a szakasz szélessége nem 100%-os.
• A sticky elhelyezés – pozicionálás, azt jelenti, hogy az elem folyamatosan a böngésző ablakban látható: relativ a pozicionálás érvényes rá, amíg el nem éri a kijelölt pontot. Amikor görgetés hatására elér egy pontot, a pozicionálás átvált fixed-re. Meg kell adni a helyzetet, ahol megragad: például, ha a böngésző ablakban felül kell megakadjon a top:0; beállítás szükséges.

A fenti példában a három egyforma négyzetre alkalmazható a z-index tulajdonság, mivel fixed pozíció van állítva rájuk illetve fedik egymást. Az értékek itt 0, 1, 2, de lehet negatív is ugyanis a nem pozícionált elemek mögé negatív értékekkel lehet helyezni tartalmat.