Abszolút pozicionálás CSS-ben

Ebben a leckében az elemek abszolút pozicionálását vizsgáljuk meg. Ez lehetővé teszi az elemek elhelyezését a megadott oldal-koordinátákon. Például egy elem 100px-re elhelyezhető az oldal tetejétől és 200px-ra balra. Az elem oda mozdul, függetlenül attól, hogy más elemek is ott helyezkednek-e el, és egyszerűen rájuk kerül. Általában úgy mondják, hogy ekkor az elem kiesik a dokumentum normál folyásából: az összes többi elem úgy fog viselkedni, mintha a mi elemünk nem is létezne.

Ahhoz, hogy egy elemet abszolútán pozícionáljunk, az elemnek be kell állítani a position tulajdonságot absolute értékre. Ezen tulajdonság mellett további kettőre is szükség van: az egyik a függőleges, a másik a vízszintes koordinátát határozza meg.

A függőleges elhelyezéshez meg kell adni egy margót felülről vagy alulról. A felső margót a top tulajdonság, az alsó margót pedig a bottom tulajdonság határozza meg. A vízszintes elhelyezéshez meg kell adni egy margót balról vagy jobbról. A bal margót a left tulajdonság, a jobb margót pedig a right tulajdonság határozza meg.

Nézzünk példákat.

Példa

Kezdetnek készítsünk két blokkot pozicionálás nélkül (figyeljük meg, hogy az elemek nincsenek az ablak széléhez nyomva, mivel a body-nak alapértelmezetten van margin beállítása):

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Példa

Most állítsuk be a zöld blokk abszolút pozicionálását úgy, hogy 150px-re legyen felülről és 100px-ra balról:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 150px;
  left: 100px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Példa

Most helyezzük a zöld blokkot 0px-re felülről és 0px-ra balról:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0px;
  left: 0px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Példa

Most helyezzük a zöld blokkot 0px-re felülről és 0px-ra jobbról:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Példa

Most helyezzük a zöld blokkot 0px-re alulról és 0px-ra jobbról:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Példa

Most helyezzük a zöld blokkot 0px-re alulról és 0px-ra balról:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Gyakorlati feladatok