Fast positionering i CSS

Nu skal vi kigge på fast positionering. Det ligner absolut positionering, forskellen viser sig i, hvordan disse positioneringstyper opfører sig når der er en scrollbar.

Når siden scrolles, vil absolut positionerede elementer scrolle med siden. Se eksemplet:

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

Результат:

Man kan gøre sådan, at når siden scrolles, forbliver det positionerede element på samme sted. For at gøre dette skal det tildeles fast positionering ved hjælp af egenskaben position med værdien fixed:

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

css#elem {
  position: fixed; /* angiver fast positionering */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

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

Результат: