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!