Vaste positionering in CSS

Nu gaan we kijken naar vaste positionering. Het lijkt op absolute positionering, het verschil komt naar voren in hoe deze positioneringstypen zich gedragen bij aanwezigheid van een scrollbalk.

Bij het scrollen van de pagina zullen absoluut gepositioneerde elementen mee scrollen met de pagina. Bekijk het voorbeeld:

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

Результат:

Het is mogelijk om te maken dat bij het scrollen van de pagina het gepositioneerde element op zijn plek blijft. Hiervoor moet je vaste positionering instellen met de eigenschap position met de waarde fixed:

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

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

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

Результат: