Fixní pozicování v CSS

Nyní si rozebereme fixní pozicování. Je podobné absolutnímu, rozdíl se projevuje v tom, jak se tyto typy pozicování chovají při přítomnosti posuvníku.

Při posouvání stránky se absolutně pozicované prvky budou posouvat spolu se stránkou. Podívejte se na příklad:

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

Результат:

Lze udělat to, aby se při posouvání stránky pozicovaný prvek zůstal na místě. K tomu je mu potřeba zadat fixní pozicování pomocí vlastnosti position s hodnotou fixed:

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

css#elem {
  position: fixed; /* nastavíme fixní pozicování */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

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

Результат: