Use Case für position:absolute

[Matthias Scharwies]

Servus!

Hallo Matthias,

du verwirrst mich. Ist position:absolute nicht der Grundbaustein aller Dropdown-Menüs?

Die beiden Tutorials "Einstieg in HTML" und "Einstieg in CSS" hören beide gefühlt bei der Hintergrundfärbung von div-Elementen auf.

Anlass für mich eine Fortsetzung: CSS/Tutorials/Ausrichtung zu schreiben.

Im ersten Kapitel CSS/Tutorials/Ausrichtung/display_und_position will ich den Spagat schaffen, einerseits den Gebrauch der einzelnen Eigenschaften zu erklären, andererseits darauf hinzuweisen, dass man display oder auch position:relative im Normalfall gar nicht benötigt. Der normale Elementfluss ohne Breitenangaben ist ja schon responsiv und vor allem flexibel.

Als Demo für position:absolute gibt es im Wiki ein Beispiel einer Info-Box, für die der umfließende Absatz eine margin-right:300px bekommt. Hmmmm.

Auch die MDN verwendet ein div <div id="abs" class="pos"><p>Absolute</p></div>, dass im Unterschied zu fixed mitscrollt.

w3schools positioniert eine Überschrift 200px in das Dokument hinein.

Gunnars Beispiel eines Skip-Links ist gut, würde aber in einem Tutorial, weil der Link ja gerade nicht zu sehen ist, nicht wirken.

Ich hatte anfangs gedacht, als Beispiel Pseudoelelemente zur Kennzeichnung von Verweisen zu verwenden, hier reicht ja aber auch ein padding-left: 2em.

Insofern ist eine Sprechblase als Tooltipp ganz gut. Sie soll aus dem Elementfluss herausgenommen werden. Der Bogen unten muss immer zum Textfeld in Beziehung stehen.

Es ist die Frage, ob solche Tutorials überhaupt gelesen werden. Gerade unsere Anfänger zeigen uns aber immer wieder Beispiele, in denen jedes Element ein display, position, z-index hat, was eigentlich gar nicht nötig ist.

Das zweite Kapitel behandelt float. Eigentlich für ein Bild oder eine Tabelle gut. Sobald die Treppenstufen kommen, wäre aber eine Lösung mit display:inline-block; Flexbox oder Grid besser.

Herzliche Grüße

Matthias Scharwies