Festpositionierung in CSS

Jetzt werden wir uns mit der festen Positionierung befassen. Sie ähnelt der absoluten Positionierung, der Unterschied zeigt sich darin, wie sich diese Positionierungstypen bei Vorhandensein einer Scrollleiste verhalten.

Beim Scrollen der Seite werden absolut positionierte Elemente zusammen mit der Seite gescrollt. Siehe Beispiel:

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

#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 kann es so einrichten, dass beim Scrollen der Seite das positionierte Element an seiner Stelle stehen bleibt. Dazu muss man ihm eine feste Positionierung mit der Eigenschaft position mit dem Wert fixed zuweisen:

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

#elem {
	position: fixed; /* feste Positionierung setzen */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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