Relatív pozicionálás elemek CSS-ben

A relatív pozicionálás a position tulajdonság relative értékével adható meg. Ez a pozicionálás lehetővé teszi az elemek eltolását a jelenlegi helyzetükhöz képest egy megadott mértékkel. Eközben a weboldal összes többi eleme úgy viselkedik, mintha az elem az eredeti helyén állna. Vagyis ez a pozicionálási típus nem veszi ki az elemet a normál folyóból.

Az eltolásokat a jelenlegi helyzettől a top, right, bottom és left tulajdonságok határozzák meg.

Példa

Kezdetként készítsünk két blokkot pozicionálás nélkül:

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

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

Результат:

Példa

Most adjuk hozzá az első blokkhoz a relative-t. Ettől egyelőre semmi sem fog változni, mivel még nem adtunk meg eltolást a blokknak:

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

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

Результат:

Példa

Most toljuk el a blokkunkat 30px-nyire felülről, a top tulajdonság megadásával. Eközben az összes többi elem úgy fog viselkedni, mintha a blokkunk az eredeti helyén maradt volna:

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

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

Результат:

Példa

Toljuk el a blokkunkat 40px-nyire balról is, a left tulajdonság megadásával:

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

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

Результат:

Példa

A top, right, bottom és left tulajdonságok negatív értékei az ellenkező irányba tolnak. Például a top pozitív értéke lefelé tol, a negatív pedig felfelé.

Toljuk el a második blokkunkat 40px-nyire felfelé, a top tulajdonság negatív értékének megadásával:

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

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Gyakorlati feladatok

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

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}