23.2. fejezet: CSS alapismeretek – Pozíció

Ez megadja a megfelelő elem helyét, ami lehet:
-    állandó (static)
-    relatív (relative)
-    fix (fixed)
-    abszolút (absolute)
Az egyes elemeket lehet alsó, felső, bal vagy jobb oldalhoz képest pozícionálni. Azonban az egyes elemek helyzete nem fog a kívánalmak szerint beállni a position tag használata nélkül.

position: static; Ez a HTML alapértelmezés. Ez a pozíció nem használja az alsó, felső, bal vagy jobb oldal tulajdonságait. Példa:

div.static {
    position: static;
    border: 3px solid #73AD21;
}

position: relative; Ez valamelyik oldalhoz képest pozícionálja a kívánt elemet. A lenti példában a bal oldalhoz képest 40 képpont távolságban van a pozícionált elem:

div.relative {
    position: relative;
    left: 40px;
    border: 3px solid #73AD21;
}

position: fixed; Itt egy adott helyen lesz az elem, tehát csak ott jelenhet meg. A helyes beállításhoz szükséges az oldalak használata is. A lenti példában a jobb alsó sarokban van egy 300 képpont széles elem:

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position: absolute; Itt az utolsó elem legközelebbi pontjához képest pozícionálható egy elem. Példa:

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}
div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Teljes példa: htmlpelda41.html.

Átlapozható elemek: itt az egyes elemek (például kép) háttérbe kerülhetnek. A z-index tulajdonság mutatja meg a sorrendjüket. Ha ez a z-index negatív értéket kap, akkor az elem háttérbe kerül. Példa:

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Teljes példa: htmlpelda42.html.

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_positioning.asp