Praktisches CSS-Beispiel für absolute Positionierung

Genau festlegen, wo das Element sich befinden soll

Verwendete CSS-Einstellungen:
position: absolute; top: 300px; left: 200px; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff;

Fläche mit CSS absolut positionieren

Das Beispiel zeigt, dass mit der Einstellung position: absolute; ein genauer Punkt auf der Seite angegeben werden kann, wo sich die Ebene aufhalten soll. In dem Fall wurde ein Quadrat mit 100 x 100 Pixel 300 Pixel unterhalb der Oberkante im Browser angebracht und zwar 200 Pixel rechts vom linken Rand.

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Diese Lösung ist eine Möglichkeit der Positionierung, aber überdeckte Inhalte sind dann nicht mehr sichtbar, weil sie überlagert werden. Und man hat das Problem, dass es beim Desktop noch passen kann, weil die Fläche außerhalb des eigentlichen Textbereiches angebracht wurde, beim Handy ist hingegen genau die Textfläche betroffen und ein vorrätiger Text wird dann nicht mehr lesbar. Diese Art der Position ist also in vielen Fällen eher nicht anzuraten.

Wo kann ich die absolutle Position einsetzen?

Die absolute Position wurde zu Beginn der CSS-Entwicklung viel öfter eingesetzt, weil man damals nur mit dem PC und Notebook die Webseiten aufgerufen hatte und daher war die Auflösung fast immer gleich und man konnte genau Elemente platzieren.

Das ist auch heute noch manchmal wichtig, etwa bei manchen Werbeformen, die als Überblendung eingesetzt werden sollen. Aber man wird trotzdem eher die relative Position bevorzugt ausprobieren und häufig mit Prozentwerte arbeiten wollen.

Lesen Sie auch

Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.

Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.

Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.

Themenseiten

Startseite CSS-Grundlagen

Praktisches CSS-Beispiel für absolute Positionierung

Genau festlegen, wo das Element sich befinden soll

Fläche mit CSS absolut positionieren

Wo kann ich die absolutle Position einsetzen?

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich