Praktisches CSS-Beispiel für relative Positionierung

Verhalten bei relativer Platzierung

 

CSS mit relativer Position einer Fläche

Fläche mit 100 x 100 Pixel Größe in blauer Farbe, 20 Pixel von oben und links positioniert.

CSS-Code: position:relative; top: 20px; left: 20px; width: 100px; height: 100px;

Man sieht, dass sich bei relativer Positionierung das Feld an den vorgegebenen Rahmen anpasst. Wäre die Positionierung absolut gewesen, wäre das Feld jetzt links oben auf der Seite zu sehen. Außerdem verdeckt das Feld weiteren Text nicht so leicht wie dies bei der absoluten Position der Fall ist.

Wann nutzt man die relative Positionierung?

Diese Form der Positionierung hat in den Anfangszeiten der CSS-Gestaltung den Gegenpol zur absoluten Positionierung dargestellt. In der Zwischenzeit arbeitet man sehr viel mit float, um Elemente auf der Webseite festzulegen. Mit margin und padding wird sehr viel gearbeitet, die relative Positionierung findet man aber trotzdem noch auf vielen Seiten, wird aber nicht mehr so oft genutzt.

---

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

---

Das hat damit zu tun, dass durch die verschiedensten Geräte und die responsive Gestaltung der Abstand zum Seitenrand anders festgelegt wird.

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.

• Positionsarten
• Beispiel: Position absolut
• Beispiel: Position relativ
• Beispiel: Position fix

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.

• Float
• Beispiel: Position float

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.

• Abstandsangaben
• Beispiel: Abstand margin
• Beispiel: Abstand margin2
• Beispiel: Abstand margin / padding

---

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

---

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.

• Breite-Höhe
• Beispiel: Breite/Höhe
• Schichten / Ebenen
• Beispiel: z-index

Themenseiten

Diesen Artikel teilen

• 
• 
• 
• 
• 

Infos zum Artikel

Artikel-Thema: Praktisches CSS-Beispiel für relative Positionierung
Beschreibung: Praktisches Beispiel für die 👍 relative Positionierung in CSS, wie sie häufig auf ✅ Webseiten eingesetzt wird.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel