Einführung in die Positionierung

Wie bereits mehrfach in diesem Tutorial erwähnt, ist die Positionierung von Elementen auf einer Webseite sehr flüssig. Im Gegensatz zum Drucken haben Sie keine feste Größe, an die Sie alles anpassen können, da Websites von Bildschirmen aller Größen besucht werden, von kleinen Handys bis zu großen Desktop-Monitoren, die alle in unterschiedlichen Auflösungen ausgeführt werden. Aus diesem Grund werden Elemente in einer Webseite automatisch direkt nacheinander in der Reihenfolge angeordnet, in der sie angegeben sind. Dieses Positionierungsmodell heißt statisch und wird standardmäßig von allen Elementen verwendet.

Die Positionierung wird hauptsächlich mithilfe der Positionseigenschaft gesteuert, die die folgenden Werte annehmen kann:

Position: static

Statisch ist die Standardmethode zum Positionieren von Elementen. Sie müssen daher nur die Positionseigenschaft auf statisch setzen, um eine zuvor festgelegte Position zu überschreiben. Im statischen Modus werden Ihre Elemente von oben nach unten im verfügbaren Bereich ihres übergeordneten Elements platziert, wobei die für das Element selbst oder die umgebenden Elemente festgelegten Ränder berücksichtigt werden.

Position: relative

Wie der Name schon sagt, können relative Elemente innerhalb ihres übergeordneten Elements verschoben werden. Wenn Sie die position -Eigenschaft auf relative festlegen, wird das Element standardmäßig so platziert, als wäre es statisch. Sie können jedoch auch die Schaltflächen top, bottom und left und right verwenden um die Eigenschaft zu Verschieben, indem diese Werte relativ zum übergeordneten Element festgelegt werden.

Position: absolute

Ein absolut positioniertes Element wird genau dort platziert, wo Sie es im Browserfenster haben möchten, indem Sie die Eigenschaften oben, unten, links und/oder rechts anpassen. Dies bedeutet, dass Sie Elemente platzieren können, z.B.: in der oberen rechten Ecke, auch wenn Ihre Hauptseite an die Mitte des Bildschirms gebunden ist. Die Ausnahme besteht darin, dass Sie ein Element mit einer absoluten Position innerhalb eines relativ positionierten Elements platzieren. In diesem Fall wird das untergeordnete Element auf den Bereich des übergeordneten Elements anstelle des gesamten Fensters beschränkt. All dies wird natürlich im kommenden Kapitel über die absolute Positionierung demonstriert.

Position: fixed

Wenn Sie die Eigenschaft fixed verwenden, wird Ihr Element so positioniert, als ob es absolut wäre, mit einem sehr wichtigen Zusatz: Wenn der Benutzer einen Bildlauf durchführt, bleibt das feste Element die ganze Zeit an dieser Position. Auf diese Weise können Sie beispielsweise ein Hauptmenü erstellen, das auch dann auf dem Bildschirm angezeigt wird, wenn der Benutzer einen Bildlauf durch Ihre Seite durchführt.

Schwimmendes Element

Neben der Positionseigenschaft bewirkt das Verschieben von Elementen auch eine Änderung der Position. Dazu verwenden wir die Eigenschaft float, die in diesem Teil des Lernprogramms ebenfalls beschrieben wird.

Zusammenfassung

Wie Sie sehen, unterstützt CSS verschiedene Positionierungstechniken, auf die in den nächsten Kapiteln noch näher eingegangen wird. Besonders interessant ist die absolute Positionierung, bei der Sie die vollständige Kontrolle darüber haben, wo ein Element platziert wird. Sie sollten sich jedoch der oben genannten Tatsache bewusst sein: Ihre Website wird sehr wahrscheinlich auf Bildschirmen mit VIELEN unterschiedlichen Größen gerendert. Wenn Sie sich also für einen anderen als den Standard-Positionierungsansatz entscheiden, sollten Sie dies sorgfältig tun! Lesen Sie weiter, um eine umfassende Übersicht über alle möglichen Positionierungsmethoden zu erhalten.