6. fejezet¶

Helyzetmegadás¶

Egy weboldal elrendezésének kialakításakor gyakran előfordul, hogy meg akarjuk változtatni bizonyos objektumok alapértelmezett pozícióját. Erre szolgál CSS-ben a pozicionálás és helyzetmegadás.

A position tulajdonság¶

A HTML objektumok pozícióját a position CSS tulajdonsággal adhatjuk meg. Értékei:

static: a normál szövegfolyamban lévő hely, a pozicionálásoknak nincs hatása (alapértelmezett)
relative: a normál szövegfolyambeli helyéhez képest elmozdítja az elemet a kért mértékben
absolute: a legközelebbi, nem static helyzetű ősobjektum belső széléhez (vagy ilyen ős hiányában a viewport széléhez) képest pozicionál
fixed: az elem gördítéskor is rögzített helyen marad.

Az elemek függőleges pozicionálására a top és bottom, míg vízszintes pozicionálásra a left és right CSS tulajdonságokat használhatjuk. A static módon pozicionált elemek esetén ezeknek az utasításoknak nincs hatása!

Példa: A position tulajdonság használata (A kód működése kipróbálható itt)

<!DOCTYPE html>
<html lang="hu">
<head>
    <title>Elemek pozicionálása</title>
    <meta charset="UTF-8"/>
    <style>
        body { margin: 0; padding: 0; font: 20px sans-serif; }
        .box { padding: 20px; }
        .container { position: relative; height: 2000px; background: lightblue; padding: 10px; }

        .first { position: absolute; top: 0; right: 0; background: tomato; }
        .second { /* top: 500px; */ background: mediumaquamarine; }
        .third { position: fixed; top: 150px; background: lightgreen; }
    </style>
</head>
<body>
<div class="container">
    <p>Pozicionálás</p>
    <div class="first box">Első</div>
    <div class="second box">Második</div>
    <div class="third box">Harmadik</div>
</div>
</body>
</html>

A fenti példa magyarázata:

Az absolute módon pozicionált, "Első" feliratú elem az őt beágyazó legközelebbi, nem static (hanem jelen esetben relative) helyzetű elem (ez most a class="container" attribútumú <div>) jobb felső sarkához igazodik.
A "Második" feliratú elem alapértelmezés szerint static helyzetű, így a pozicionálásnak nincs hatása.
A fixed helyzetű, "Harmadik" feliratú elem gördítéskor is rögzített helyen marad.

Tipp

Manapság gyakran szokták használni a sticky kulcsszót is elemek pozicionálása során. Erről itt olvashatunk részletesebben.

Úsztatás¶

A float CSS tulajdonsággal lehetőségünk van elemek úsztatására. Ekkor az úsztatott elemet a tartalom a másik irányból körbefutja (tehát például ha balra úsztatunk egy elemet, akkor jobbról fogja őt körbefutni a tartalom). A tulajdonság lehetséges értékei: left (balra úsztatás), right (jobbra úsztatás), none (nincs úsztatás).

Példa: Egy kép balra úsztatása (A felhasznált kép forrása)

<!DOCTYPE html>
<html lang="hu">
<head>
    <title>Úsztatás</title>
    <meta charset="UTF-8"/>
    <style>
        .floating-img {
            height: 120px;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<img class="floating-img" src="giraffe.jpg" alt="Zsiráf"/>
<p>A zsiráf (Giraffa camelopardalis) Afrikában élő párosujjú patás emlős, a legmagasabb és leghosszabb nyakú szárazföldi élőlény. A szavannák lakója az ókortól kedvelt attrakció volt - Rómában először Julius Caesar mutatott be zsiráfokat az amfiteátrumi játékokon - és ma is népszerű szafarikon és állatkertekben. Neve arab eredetű, olasz közvetítéssel jutott el a magyarba a késő középkorban. A tudományos nevében szereplő szereplő camelopardalis a faj addig használt nevére, a görög kamélopardaliszra ("tevepárduc") utal.</p>
</body>
</html>

A kód kimenete

Ha meg szeretnénk akadályozni egy objektum körül egy másik, úsztatott objektum elhelyezését, akkor ezt a clear CSS tulajdonsággal tudjuk megtenni. Lehetséges értékei: left (balról nem lehet úsztatott elem), right (jobbról nem lehet úsztatott elem), both (sem balról, sem jobbról nem lehet úsztatott elem), none (balról és jobbról is lehet úsztatott elem).

Árnyékok¶

CSS-ben a text-shadow tulajdonsággal adhatunk egy szövegnek árnyékot. A tulajdonság értékeként rendre 4 paraméter adható meg: a vízszintes eltolás, a függőleges eltolás, az árnyék elmosódásának mértéke és az árnyék színe. Az utolsó két paraméter elhagyható.

A box-shadow tulajdonsággal dobozszerű elemeknek is adható árnyék. Ennek értékeként rendre 5 paramétert adhatunk meg: a vízszintes eltolást, a függőleges eltolást, az elmosódás mértékét, az árnyék kiterjedését és az árnyék színét. Az utolsó három paraméter elhagyható.

Egy szöveghez vagy egy dobozhoz akár több árnyék is megadható, vesszővel elválasztva.

Példa: Árnyékok használata

<!DOCTYPE html>
<html lang="hu">
<head>
    <title>Árnyékok</title>
    <meta charset="UTF-8"/>
    <style>
        #paragraph { text-shadow: 2px 5px 5px red; }
        #box { border: 2px solid black; box-shadow: 0 3px lightblue, 0 2px 25px yellow; }
    </style>
</head>
<body>
<p id="paragraph">Ez egy árnyékkal rendelkező szöveg.</p>
<div id="box">Ez egy árnyékkal rendelkező doboz.</div>
</body>
</html>

A kód kimenete

A z-index tulajdonság¶

A HTML elemek pozicionálásakor előfordulhat, hogy bizonyos elemek takarják egymást. Alapértelmezett módon az egymást takaró HTML objektumok közül mindig a kódban később szereplő elem kerül előtérbe.

Az elemek mélységi sorrendjét a z-index CSS tulajdonsággal szabályozhatjuk. Ennek értéke tetszőleges egész szám lehet (akár negatív szám is). Ekkor az egymást takaró elemek közül az kerül előtérbe, amelynek nagyobb a z-index értéke. Az azonos z-index értékkel rendelkező elemek esetén a kódban később szereplő elem fogja takarni a másikat.

Példa: A z-index tulajdonság használata

<!DOCTYPE html>
<html lang="hu">
<head>
    <title>A z-index tulajdonság</title>
    <meta charset="UTF-8"/>
    <style>
        div { width: 150px; height: 150px; position: absolute; text-align: right; }
        .first { background: tomato; z-index: 1; top: 50px; left: 20px; }
        .second { background: lightgreen; z-index: 100; top: 120px; left: 80px; }
        .third { background: lightblue; z-index: -1; top: 80px; left: 130px; }
    </style>
</head>
<body>
<div class="first">z-index: 1</div>
<div class="second">z-index: 100</div>
<div class="third">z-index: -1</div>
</body>
</html>

Megjegyzés

A z-index tulajdonságot csak olyan elemek esetében lehet használni, amelyeknek a pozícionálása nem "static".

A kód kimenete

Pseudo-elemek¶

Ha egy HTML objektum egy specifikus részét szeretnénk formázni (pl. egy szöveg első betűjét vagy első sorát), akkor használjuk a CSS pseudo-elemeket. Ezeket a szelektor után, dupla kettősponttal adjuk meg: szelektor::pseudoelem.

A fontosabb pseudo-elemek:

::before: generált tartalom közvetlenül az elem előtt
::after: generált tartalom közvetlenül az elem után
::selection: a kijelölt szövegrész
::first-letter: a szöveg első karaktere
::first-line: a szöveg első sora.

Példa: Pseudo-elemek használata

<!DOCTYPE html>
<html lang="hu">
<head>
    <title>Pseudo-elemek</title>
    <meta charset="UTF-8"/>
    <style>
        /* Ha egérrel kijelöljük egy bekezdés szövegét, akkor a kijelölés háttérszíne világoszöld lesz */
        p::selection { background-color: lightgreen; }

        /* A bekezdések első betűje megnövelt betűméretű és piros színű lesz */
        p::first-letter { font-size: 120%; color: red; }

        /* Minden bekezdés után beszúrjuk a " (bekezdés vége)" szöveget */
        p::after { content: " (bekezdés vége)"; }
    </style>
</head>
<body>
<p>Első bekezdés</p>
<p>Második bekezdés</p>
<p>Harmadik bekezdés</p>
</body>
</html>

A kód kimenete

Utolsó frissítés: 2025-08-10 20:20:45