HTML & CSS

Positionierung von HTML-Elementen

paulopitz@htl-shkoder.com
Wiederholung Flexbox

display: flex; erstellt einen Container für eine

eindimensionale Ausrichtung.

Die Ausrichtung der Items kann mit mehreren

Befehlen gesteuert werden:
• justify-content
• align-items
Positionierung

Positionierung von HTML-Element funktioniert auf viele Arten

• Reihenfolge im Quelltext
• CSS Flex
• CSS Grid (nächstes Jahr)
• CSS Position

CSS Position wird verwendet, wenn die Genauigkeit von Flexbox

nicht ausreicht!
https://css-tricks.com/almanac/properties/p/position/
https://www.w3schools.com/cssref/pr_class_position.asp
HTML-Tree

HTML-Element sind normalerweise so positioniert, wie sie geschrieben

werden: Nacheinander!
Main (Parent)

Siblings
H1 (Child 1) P (Child 2) Img (Child 3)

Span
(Child 1 of Child 2)

<main> Hallo
<h1>Hallo</h1> Das ist ein Absatz
<p>Das ist ein <span>Absatz</span></p> Bild
<img src="test.jpg" alt="Testbild">
</main>
Position: Relative

• Die Eigenschaft position: relative; positioniert das Element

relativ zur momentanen Position.
• Gibt es mehrere Sibling-Elemente, bleibt der relative Fluss aufrecht.
• Mit Top und Left kann man das Element dann verschieben.

.element {
position: relative;
top: 20px;
left: -10px;
}
Position: Absolute

• Die Eigenschaft position: absolute; positioniert das Element

absolute zum letzten relativ positionieren Element.
• Gibt es mehrere Sibling-Elemente, beeinflussen sie sich gegeneinander
nicht, sie sind unabhängig und können auch übereinander sein.
• Mit Z-Index kann man die Ebene nach vorne und hinten verschieben
• Mit Top und Left kann man das Element horizontal und vertikal
verschieben.

.element {
position: absolute;
top: 20px;
left: -10px;
z-index: 100;
}
Position: Fixed

• Die Eigenschaft position: fixed; positioniert das Element absolut

zum letztem relativ positionierten Element.
• Bewegt man die Website, bleibt das Element immer fixiert und bewegt
sich nicht.
• Dieser Effekt wird besonders für Hintergrundbilder und Navigationen
verwendet.

.element {
position: fixed;
}
Übung: position: absolute;

Gemeinsame Übung (<name>.htl-projekt.com/med9/cards)

Übung: position: fixed;

Gemeinsame Übung (<name>.htl-projekt.com/med9/onepager)

Shop About Contact Us