Pozycjonowanie stałe w CSS

Teraz zajmiemy się pozycjonowaniem stałym. Jest ono podobne do pozycjonowania absolutnego, różnica przejawia się w tym, jak zachowują się te typy pozycjonowania w obecności paska przewijania.

Podczas przewijania strony elementy pozycjonowane absolutnie będą przewijać się razem ze stroną. Spójrz na przykład:

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;
}

Результат:

Można sprawić, aby podczas przewijania strony pozycjonowany element pozostawał w tym samym miejscu. Aby to zrobić, należy ustawić mu pozycjonowanie stałe za pomocą właściwości position o wartości fixed:

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

css#elem {
  position: fixed; /* ustawiamy pozycjonowanie stałe */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

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

Результат: