Fixe Positionierung

Die feste Position ist sehr interessant. Es funktioniert so ziemlich wie die absolute Positionierung, mit einem wichtigen Unterschied: Ein Element mit einer festen Position bleibt an der angegebenen Stelle, auch wenn Sie nach oben oder unten scrollen. Auf diese Weise können Sie "klebrige Elemente" erstellen, z.B.: Menüs, die sich immer am oberen, unteren, linken oder rechten rand des Ansichtsfensters befinden, egal wie weit Sie scrollen.

Ein weiterer wichtiger Unterschied ist, dass Sie ein absolut positioniertes Element zwar relativ zu seinem übergeordneten Element positionieren müssen (siehe Artikel über die absolute Positionierung, wenn Sie neugierig sind), dies jedoch bei einem festen Element nicht möglich ist - es wird immer in Bezug auf das Ansichtsfenster Element platziert (normalerweise das Browserfenster).

Also, wie wird es benutzt? Hier ist ein Beispiel:

<style type="text/css">
.top-fixed {
	position: fixed;
	top: 0;
	right: 0;
	background-color: #eee;
	padding: 3px 10px;
}
</style>

<div class="top-fixed">Fixed element (Top)</div>
<p style="margin-bottom: 12000px;">Filler text</p>

Sorgen Sie sich nicht um den Füllabsatz, sondern stellen Sie sicher, dass das Ansichtsfenster hoch genug ist, damit Sie die Auswirkung des festen Elements beim Scrollen sehen können.

Unter Verwendung des festen Werts für die Positionseigenschaft zusammen mit der oberen und der rechten Eigenschaft können wir jetzt unser Kästchen an der oberen rechten Ecke befestigen und dort lassen, auch wenn der Benutzer einen Bildlauf durchführt. Dies ist hervorragend zum Erzeugen von z.B.: feste spitzenmenüs!

Beachten Sie, dass genau wie bei absolut positionierten Elementen oder schwebenden Elementen ein festes Element aus dem regulären Seitenfluss entfernt wird, sodass der Browser nicht mehr automatisch Speicherplatz zuweist. Dies ist im obigen Beispiel zu sehen, in dem unser festes Element andere Elemente auf der Seite überlappt. Um dies zu beheben, müssen Sie lediglich sicherstellen, dass auf Ihrer Seite Platz für Ihre festen Elemente vorhanden ist, indem Sie beispielsweise umgebenden Elementen Ränder und Abstände hinzufügen. Wenn sich die Elemente tatsächlich überlappen sollen, müssen Sie über die Eigenschaft z-index steuern, welches Element Vorrang hat, wie im Kapitel über die absolute Positionierung beschrieben.

Feste Elemente auf anderen Seiten

Sie können Ihre Elemente genauso einfach wie im obigen Beispiel an alle vier Seiten des Ansichtsfensters binden. Es ist einfach eine Frage der Verwendung der Eigenschaften top, right, bottom und/oder left, je nachdem, wo Sie das Element haben möchten. Hier ist ein Beispiel:

<style type="text/css">
.fixed {
	position: fixed;
	background-color: #eee;
	padding: 3px 10px;
}
</style>

<div class="fixed" style="top: 0; left: 100px;">Top</div>
<div class="fixed" style="top: 100px; right: 0;">Right</div>
<div class="fixed" style="bottom: 0; left: 100px;">Bottom</div>
<div class="fixed" style="top: 100px; left: 0;">Left</div>

<p style="margin-bottom: 12000px;">Filler text</p>

Beachten Sie, wie einfach es ist: Solange für das Element eine feste Position festgelegt ist, können Sie mit den Eigenschaften top/bottom und/oder left/right beginnen, das Element entsprechend zu positionieren.

Zusammenfassung

Die feste Positionierung ist ein leistungsfähiges Werkzeug zum Erstellen angehefteter Elemente. Dies bedeutet lediglich, dass die festen Elemente auch dann an derselben Position im Ansichtsfenster verbleiben, wenn der Benutzer durch Ihre Seite blättert. Dies kann in vielen Szenarien verwendet werden, z.B.: in angehefteten Hauptmenüs, beim Teilen von Schaltflächen links oder rechts, die an Ort und Stelle bleiben usw.