Rögzített pozicionálás CSS-ben

Most a rögzített pozicionálással fogunk megismerkedni. Hasonló az abszolút pozicionáláshoz, a különbség akkor nyilvánul meg, amikor görgetősáv van jelen.

Az oldal görgetésekor az abszolút pozicionált elemek az oldallal együtt fognak görgetődni. Nézd meg a példát:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат:

Megtehetjük, hogy az oldal görgetésekor a pozicionált elem a helyén maradjon. Ehhez rögzített pozicionálást kell beállítanunk a position tulajdonság fixed értékével:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: fixed; /* rögzített pozicionálás beállítása */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат: