# 14. Pozicionálás

2025. november 23. • 22 perc olvasás • CSS3 alapok

A CSS pozicionálás lehetővé teszi az elemek pontos elhelyezését a weboldalon. Ebben a cikkben megismerkedhetsz a display típusokkal, a position tulajdonság különböző értékeivel, a z-index rétegeléssel és az overflow kezeléssel.

#### Érettségi információ

Ez a lecke VEGYES tartalmú!

Ez a lecke érettségin kért és bónusz technikákat is tartalmaz:

- Érettségi anyag: `display: block/inline/inline-block`, `float` és `clear`
- Bónusz: position értékek, z-index, sticky, overflow haladó használata

A float technika bár elavult a modern webfejlesztésben, az érettségi követelmények része!

## Display tulajdonság EMELT SZINT

A `display` tulajdonság meghatározza, hogyan viselkedik és jelenik meg egy elem a dokumentumban.

### Block elemek

CSS - display: block
`/* Block elemek jellemzői */ .block { display: block; } /* - Új sorban kezdődik - Teljes szélességet elfoglalja (alapból 100%) - width és height beállítható - Margin és padding minden irányban működik - Alapértelmezett block elemek: div, p, h1-h6, ul, li, section, article */ /* Inline elem block-ká alakítása */ span.block-span { display: block; width: 200px; margin: 10px 0; }`

### Inline elemek

CSS - display: inline
`/* Inline elemek jellemzői */ .inline { display: inline; } /* - Nem kezd új sort - Csak a tartalomhoz szükséges szélességet foglalja el - width és height NEM működik - Csak vízszintes margin/padding működik - Alapértelmezett inline elemek: span, a, strong, em, img */ /* Block elem inline-ná alakítása */ li.inline-item { display: inline; /* Lista elemek egy sorba */ }`

### Inline-block elemek

CSS - display: inline-block
`/* Inline-block: mindkét világ előnye */ .inline-block { display: inline-block; } /* - Nem kezd új sort (mint inline) - DE width és height beállítható (mint block) - Margin és padding minden irányban működik - Ideális: gombok, navigációs elemek, képek szöveggel */ /* Navigációs linkek */ .nav-link { display: inline-block; padding: 10px 20px; margin: 0 5px; background: #007bff; color: white; } /* Képkártyák egymás mellett */ .image-card { display: inline-block; width: 200px; vertical-align: top; }`

### Két oszlopos elrendezés inline-block-kal

HTML + CSS - 50%-50% elrendezés
`<!-- HTML --> <div class="container"> <div class="column">Bal oszlop</div><div class="column">Jobb oszlop</div> </div> <!-- CSS --> <style> .container { display: block; width: 100%; } .column { display: inline-block; width: 50%; vertical-align: top; } </style> <!-- FONTOS: Az inline-block elemek között NE legyen szóköz vagy sortörés a HTML-ben, mert az megjelenik! Ezért vannak az elemek közvetlenül egymás után. -->`

#### Mi van, ha padding vagy margin is kell?

Padding (belső térköz) esetén `box-sizing: border-box` kell:

    .column {
      width: 50%;
      padding: 15px;
      box-sizing: border-box;  /* padding beleszámít az 50%-ba */
    }

Margin (külső térköz) esetén csökkenteni kell a szélességet:

    .column {
      width: 48%;
      margin-right: 2%;  /* 48% + 2% + 48% + 2% = 100% */
    }

A margin mindig a width-en kívül van, ezért a számításnál figyelembe kell venni!

#### Élő példa - display típusok:

inline: egymás mellett, méret nem állítható

inline inline inline

block: új sorban, teljes szélesség

block block

inline-block: egymás mellett, méret állítható

inline-block inline-block

50-50% elrendezés: block konténerben két inline-block oszlop

Bal oszlop (50%)
Jobb oszlop (50%)

### Display: none és visibility BÓNUSZ

CSS - Elem elrejtése
`/* display: none - Teljesen eltűnik */ .hidden { display: none; /* Nem foglal helyet, nem látható */ } /* visibility: hidden - Láthatatlan, de helyet foglal */ .invisible { visibility: hidden; /* Helyet foglal, de nem látható */ } /* opacity: 0 - Átlátszó, de interaktív */ .transparent { opacity: 0; /* Helyet foglal, kattintható! */ } /* Összehasonlítás */ .comparison { /* display: none → Nincs hely, nincs elem */ /* visibility:hidden → Van hely, nincs elem */ /* opacity: 0 → Van hely, van elem (kattintható) */ } /* Responsive elrejtés */ @media (max-width: 768px) { .desktop-only { display: none; } }`

### Display típusok összefoglalása

Display | Új sor? | Width/Height | Margin/Padding
--- | --- | --- | ---
block | Igen | Működik | Mind működik
inline | Nem | Nem működik | Csak vízszintes
inline-block | Nem | Működik | Mind működik
none | - | - | Elem eltűnik

## Float és clear EMELT SZINT

A `float` tulajdonság eredetileg képek körbefolyatására készült, de évekig ez volt az egyetlen módszer többoszlopos layoutok készítésére CSS-ben.

#### Miért érettségi anyag a float?

A `float` és `clear` tulajdonságok szerepelnek az érettségi követelményekben, annak ellenére, hogy a modern webfejlesztésben már elavultnak számítanak.

Fontos tudni:

- A float legacy (örökölt) technika - régi weboldalakban találkozhatsz vele
- Modern honlapkészítésben már nem használjuk layout célokra
- Helyette Flexbox és CSS Grid a javasolt (lásd: 15. lecke)
- Ma már csak kép körbefolyatásához érdemes használni

Az érettségin viszont kérhetik, ezért fontos megérteni a működését!

CSS - float tulajdonság
`/* Float: elem "lebegtetése" */ .float-left { float: left; } .float-right { float: right; } .float-none { float: none; } /* Clear: float megszüntetése */ .clear-left { clear: left; } .clear-right { clear: right; } .clear-both { clear: both; } /* Eredeti használat: kép körbefolyatása szöveggel */ .article img { float: left; margin: 0 20px 10px 0; } /* Clearfix: float konténer magassága */ .container::after { content: ""; display: table; clear: both; } /* FIGYELEM: Float már elavult layouthoz! Használj helyette: - Flexbox: egydimenziós elrendezés - Grid: kétdimenziós elrendezés Float ma már csak kép körbefolyatáshoz használatos. */`

#### Float vs modern technikák

- Float: Elavult layouthoz, használd csak kép körbefolyatásra
- Flexbox: Egydimenziós elrendezéshez (sorok vagy oszlopok)
- CSS Grid: Kétdimenziós elrendezéshez (sorok ÉS oszlopok)
- Lásd: 15. Flexbox és CSS Grid

HTML + CSS - Float right példa
`<!-- HTML --> <div class="container"> <div class="float-box">15%</div> <p>Ez egy példa szöveg, ami körbefolyja a jobb oldalra úsztatott dobozt. A float: right tulajdonság hatására a kék doboz a jobb szélre kerül, és a szöveg körbefolyja azt.</p> <p>A float régen népszerű volt layoutokhoz, de ma már csak ilyen szöveg-körbefolyatásra használjuk. A konténeren overflow: hidden van, hogy a float ne "lógjon ki" belőle.</p> </div> <!-- CSS --> <style> .container { overflow: hidden; /* Float "befogása" */ } .float-box { float: right; width: 15%; padding: 10px; margin: 0 0 10px 15px; background: #007bff; color: white; text-align: center; } </style>`

#### Élő példa - Float right:

15%
float: right

Ez egy példa szöveg, ami körbefolyja a jobb oldalra úsztatott dobozt. A `float: right` tulajdonság hatására a kék doboz a jobb szélre kerül, és a szöveg körbefolyja azt.

A float régen népszerű volt layoutokhoz, de ma már csak ilyen szöveg-körbefolyatásra használjuk. A konténeren `overflow: hidden` van, hogy a float ne "lógjon ki" belőle.

## Position tulajdonság BÓNUSZ

A `position` tulajdonság meghatározza, hogyan pozicionálódik az elem. Öt értéke van: static, relative, absolute, fixed és sticky.

### position: static (alapértelmezett)

CSS - position: static
`/* Static: normál dokumentum folyam */ .static { position: static; /* Alapértelmezett */ } /* - Az elem a normál dokumentum folyamban marad - top, right, bottom, left NEM működik - z-index NEM működik - Minden elem alapból static */`

### position: relative

CSS - position: relative
`/* Relative: eredeti pozícióhoz képest elmozdul */ .relative { position: relative; top: 20px; /* Lefelé mozdul 20px-t */ left: 30px; /* Jobbra mozdul 30px-t */ } /* - Az elem helye megmarad a dokumentum folyamban - top/right/bottom/left az EREDETI pozícióhoz képest mozgatja - z-index működik - Fontos: referencia pont lesz absolute gyerekeknek! */ /* Gyakori használat: absolute gyerek konténere */ .card { position: relative; /* Referencia pont */ } .card .badge { position: absolute; /* A .card-hoz képest pozicionál */ top: -10px; right: -10px; }`

### position: absolute

CSS - position: absolute
`/* Absolute: kikerül a dokumentum folyamból */ .absolute { position: absolute; top: 0; right: 0; } /* - Kikerül a normál dokumentum folyamból - Nem foglal helyet (más elemek "alá csúsznak") - A legközelebbi POZICIONÁLT (nem static) őshöz képest pozicionál - Ha nincs ilyen ős: a viewport-hoz képest */ /* Klasszikus mintázat: szülő relative, gyerek absolute */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; /* Közvetlenül a szülő alatt */ left: 0; width: 200px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* Középre igazítás absolute-tal */ .centered-absolute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }`

#### Élő példa - Absolute pozicionálás:

top:0 left:0 top:0 right:0 bottom:0 left:0 bottom:0 right:0 közép

### position: fixed

CSS - position: fixed
`/* Fixed: viewport-hoz rögzített */ .fixed { position: fixed; top: 0; left: 0; width: 100%; } /* - A VIEWPORT-hoz (böngésző ablak) képest pozicionál - Görgetéskor a helyén marad - Kikerül a dokumentum folyamból - Ideális: sticky header, floating button, modal overlay */ /* Sticky header */ .header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* Body padding a fixed header miatt */ body { padding-top: 70px; /* Header magassága */ } /* Vissza a tetejére gomb */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: #007bff; color: white; z-index: 999; } /* Modal overlay */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; }`

### position: sticky

CSS - position: sticky
`/* Sticky: relative és fixed keveréke */ .sticky { position: sticky; top: 0; } /* - Alapból relative-ként viselkedik - Görgetésnél "ragad" a megadott pozícióhoz - A szülő elemen belül marad (nem lép ki belőle) - Ideális: szekció címsorok, oldalsáv */ /* Sticky header */ .header-sticky { position: sticky; top: 0; background: white; z-index: 100; } /* Sticky szekció címsorok */ .section-title { position: sticky; top: 0; background: #f5f5f5; padding: 15px; border-bottom: 1px solid #ddd; } /* Sticky oldalsáv */ .sidebar { position: sticky; top: 80px; /* Header magasság + kis tér */ align-self: start; /* Flexbox/Grid esetén fontos */ } /* Sticky tábla fejléc */ table { border-collapse: collapse; } th { position: sticky; top: 0; background: #333; color: white; }`

#### Sticky működési feltételei

- Meg kell adni: top, bottom, left vagy right értéket
- Szülő korlátozza: A szülő elemen belül marad
- overflow: hidden a szülőn megakadályozza a sticky működését
- Magasság: A szülőnek nagyobbnak kell lennie, mint a sticky elem

### Position értékek összefoglalása

Position | Referencia | Dokumentum folyam | Használat
--- | --- | --- | ---
static | - | Benne marad | Alapértelmezett
relative | Eredeti hely | Benne marad | Enyhe eltolás, szülő
absolute | Pozicionált ős | Kikerül | Dropdown, badge
fixed | Viewport | Kikerül | Header, modal
sticky | Scroll pozíció | Benne marad | Sticky header

## Top, right, bottom, left BÓNUSZ

CSS - Pozíció tulajdonságok
`/* Csak position: relative/absolute/fixed/sticky esetén működnek */ .positioned { position: absolute; /* Pixelben */ top: 20px; right: 30px; /* Százalékban (referencia elem méretéhez) */ top: 10%; left: 50%; /* Auto */ top: auto; /* Nem pozicionál abban az irányban */ /* Negatív érték (túlnyúlik) */ top: -10px; } /* Kitöltés */ .fullsize { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Vagy rövidebben: */ inset: 0; } /* Inset rövidítés (modern) */ .inset-example { inset: 10px; /* Minden oldalon 10px */ inset: 10px 20px; /* top/bottom | left/right */ inset: 10px 20px 30px; /* top | left/right | bottom */ inset: 10px 20px 30px 40px; /* top right bottom left */ }`

## Z-index - Rétegelés BÓNUSZ

A `z-index` meghatározza az elemek sorrendjét a Z tengelyen (melyik elem van "felül").

CSS - z-index
`/* z-index csak pozicionált elemeknél működik! */ /* (position: relative/absolute/fixed/sticky) */ .behind { z-index: -1; } /* Háttérbe kerül */ .normal { z-index: 0; } /* Alapértelmezett */ .above { z-index: 1; } /* Előtérbe kerül */ /* Tipikus z-index skála */ :root { --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; --z-toast: 700; } /* Használat */ .dropdown-menu { z-index: var(--z-dropdown); } .header { position: sticky; z-index: var(--z-sticky); } .modal-overlay { position: fixed; z-index: var(--z-modal-backdrop); } .modal { position: fixed; z-index: var(--z-modal); } /* Stacking context (veremkontextus) */ /* Új stacking context jön létre, ha: */ .new-context { position: relative; z-index: 1; /* z-index != auto */ /* VAGY */ opacity: 0.99; /* opacity < 1 */ /* VAGY */ transform: scale(1); /* transform nem none */ /* VAGY */ isolation: isolate; /* Explicit context */ }`

#### Z-index buktatók

- Csak pozicionált elemnél működik: static elemnél nincs hatása
- Stacking context: Gyerek elem nem kerülhet a szülő contexten kívülre
- Ne használj véletlenszerű nagy számokat: 9999 helyett tervezd meg a skálát
- Negatív z-index: A szülő mögé kerül, de a háttér elé

#### Élő példa - Z-index:

z-index: 1
z-index: 2
z-index: 3

## Overflow - Túlcsordulás kezelése BÓNUSZ

CSS - overflow
`/* overflow: visible (alapértelmezett) */ .visible { overflow: visible; /* Tartalom kilóg a dobozon */ } /* overflow: hidden */ .hidden { overflow: hidden; /* Túlcsorduló tartalom levágva, nincs scrollbar */ } /* overflow: scroll */ .scroll { overflow: scroll; /* Mindig van scrollbar (akkor is, ha nem kell) */ } /* overflow: auto (ajánlott) */ .auto { overflow: auto; /* Scrollbar csak ha szükséges */ } /* Egyedi tengelyeken */ .custom { overflow-x: hidden; /* Vízszintes: levágva */ overflow-y: auto; /* Függőleges: scrollbar ha kell */ } /* Gyakori használati esetek */ /* Fix magasságú görgethető terület */ .scrollable-list { height: 300px; overflow-y: auto; } /* Szöveg levágása ellipsissel */ .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Kép levágása a konténerhez */ .image-container { width: 200px; height: 200px; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: cover; } /* Clearfix (régi float technika) */ .clearfix::after { content: ""; display: table; clear: both; }`

#### Élő példa - Overflow:

visible
Ez a szöveg kilóg a dobozból, mert overflow: visible
hidden
Ez a szöveg le van vágva, mert overflow: hidden van beállítva
auto
Ez a szöveg görgethető, mert overflow: auto és túl hosszú a tartalom

## Gyakorlati példa: Két oszlopos cikk

Két oszlopos elrendezés `inline-block`-kal, a bal oszlopban `float`-tal körbefolyatott képpel.

HTML + CSS - Két oszlopos cikk
`<!-- HTML --> <div class="cikk-container"> <div class="bal-oszlop"> <h3>Processzor teszt</h3> <div class="kep-container"> <img src="cpu.jpg" alt="CPU" class="cikk-kep"> <p class="kep-leiras">Intel i9-14900K</p> </div> <p>Az Intel Core i9-14900K 24 maggal érkezik. Kiváló teljesítményt nyújt játékokban és professzionális alkalmazásokban egyaránt. A tesztünk során a processzor minden várakozásunkat felülmúlta. A többszálú teljesítmény kiemelkedő, az energiafogyasztás pedig elfogadható maradt terhelés alatt is.</p> </div><div class="jobb-oszlop"> <h3>Specifikációk</h3> <ul> <li>24 mag (8P + 16E)</li> <li>5.8 GHz turbo</li> <li>36 MB L3 cache</li> <li>125W TDP</li> </ul> <p><strong>Ár:</strong> 249 990 Ft</p> </div> </div> <!-- CSS --> <style> .cikk-container { width: 100%; } .bal-oszlop { display: inline-block; width: 70%; vertical-align: top; overflow: hidden; /* Float befogása */ } .jobb-oszlop { display: inline-block; width: 30%; vertical-align: top; } .kep-container { float: left; margin: 0 15px 5px 0; padding-right: 15px; border-right: 2px solid #007bff; } .cikk-kep { width: 80px; height: 80px; display: block; } .kep-leiras { margin: 5px 0 0 0; font-size: 12px; color: #666; text-align: center; } .bal-oszlop h3 { margin-top: 0; } </style>`

#### Élő példa - Két oszlopos cikk:

### Processzor teszt

CPU

Intel i9-14900K

Az Intel Core i9-14900K 24 maggal érkezik. Kiváló teljesítményt nyújt játékokban és professzionális alkalmazásokban egyaránt. A tesztünk során a processzor minden várakozásunkat felülmúlta. A többszálú teljesítmény kiemelkedő, az energiafogyasztás pedig elfogadható maradt terhelés alatt is.

### Specifikációk

- 24 mag (8P + 16E)
- 5.8 GHz turbo
- 36 MB L3 cache
- 125W TDP

Ár: 249 990 Ft

Két `inline-block` oszlop (70%-30%), a bal oldalon `float: left` képpel. Az oszlopokon `overflow: hidden` a float befogásához.

## Összefoglalás

Ebben a cikkben megismerkedtél a CSS pozicionálással:

- Display: block, inline, inline-block, none
- Position: static, relative, absolute, fixed, sticky
- Pozíció: top, right, bottom, left (+ inset)
- Z-index: Elemek rétegelése
- Overflow: Túlcsordulás kezelése
- Float: Csak kép körbefolyatáshoz (elavult layouthoz)

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a pozicionálást:

- Főoldal - Fixed/sticky header navigációval
- Alkatrészek - Dropdown menü absolute pozicionálással
- Blog oldal - Sticky oldalsáv

#### Következő lépések

Gyakorold a pozicionálást: készíts egy dropdown menüt, vagy egy sticky headert a saját projektedben!

Következő cikk: Flexbox és CSS Grid - Ismerd meg a mobilbarát weboldalak készítésének technikáit!