Use Case für position:absolute

[Matthias Scharwies]

Servus!

• CSS/Tutorials/Ausrichtung/display_und_position#position

Ich suche einen best practice- use case für position:absolute, finde aber nur Quadrate, die willkürlich aus dem Elementfluss genommen werden.

Was würdet ihr dort als gutes Beispiel nehmen?

• Hamburger-Button oben rechts im body
• close-Button eines Warnhinweises (würde man heute mit HTML5 dialog machen)
• Pseudo-Element positionieren; evtl
  • Tooltip_mit_Sprechblase
• 2 Bilder übereinander als Passepartout; (würde man heute mit background-image machen)

Faazit soll sein, dass man es eigentlich nie macht!

Vielen Dank im Voraus!

Matthias Scharwies

[Henry]

Hallo Matthias,

Was würdet ihr dort als gutes Beispiel nehmen?

• Hamburger-Button oben rechts im body

Nein, soll ja interagieren mit dem Rest, zumindest halte ich das für besser.

• close-Button eines Warnhinweises (würde man heute mit HTML5 dialog machen)

Ja, denn Dialog kein Verlass drauf, zuwenig Browserunterstützung.

• Pseudo-Element positionieren; evtl
  • Tooltip_mit_Sprechblase
• 2 Bilder übereinander als Passepartout; (würde man heute mit background-image machen)

Ja dafür ist das auch gut.

Faazit soll sein, dass man es eigentlich nie macht!

Oh doch, sehr hilfreich bei den genannten Sachen und bei vielen selbstgestrickten Admintools.

Gruss
Henry

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich suche einen best practice- use case für position:absolute, finde aber nur Quadrate, die willkürlich aus dem Elementfluss genommen werden.

Was würdet ihr dort als gutes Beispiel nehmen?

Skip-Link?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Matthias,

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

Rolf

[JürgenB]

Hallo Rolf,

das war auch mein erster Gedanke.

Gruß
Jürgen

[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

[Rolf B]

Hallo Matthias,

grundsätzlich bietet sich position:absolute für Dinge an, die

• nicht im normalen Elementfluss liegen
• relativ zu einem anderen Element positioniert werden (nämlich zum nächstgelegenen ElternVorfahren-Element, das nicht den Defaultwert position:static hat) und mit diesem Element mitscrollen

Ich würde annehmen, dass es sich dabei zumeist um Einblend-Elemente handeln dürfte, wie Dropdowns, Tooltips oder Popup-Fenster. Ob man position:absolute für ständig sichtbare Elemente braucht, tja, da müsste ich mir erstmal einen Usecase überlegen, den man nicht mit anderen Techniken besser umsetzen kann.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

grundsätzlich bietet sich position:absolute für Dinge an, die

• nicht im normalen Elementfluss liegen

Eben, und so was sollten die Anfänger anfangs gar nicht erst versuchen!

• relativ zu einem anderen Element positioniert werden (nämlich zum nächstgelegenen Eltern-Element, das nicht den Defaultwert position:static hat) und mit diesem Element mitscrollen

Ich würde annehmen, dass es sich dabei zumeist um Einblend-Elemente handeln dürfte, wie Dropdowns, Tooltips oder Popup-Fenster.

Deshalb ist der Tooltip wohl das Geeignetste, wobei mir das .tooltip span[role=tooltip]ein bisschen aufstösst. Das kann man aber wohl verschmerzen.

Ob man position:absolute für ständig sichtbare Elemente braucht, tja, da müsste ich mir erstmal einen Usecase überlegen, den man nicht mit anderen Techniken besser umsetzen kann.

Eben! Das sind die ganzen Fragen: "Mein Bild verdeckt ..." "Die Überschrift ist nicht sichtbar ...!"

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Rolf,

Ob man position:absolute für ständig sichtbare Elemente braucht, tja, da müsste ich mir erstmal einen Usecase überlegen, den man nicht mit anderen Techniken besser umsetzen kann.

bei Google Maps / OSM-Leaflet wüsste ich nicht, wie ich die Kartenelemente ohne absolute Positionierung hin bekommen könnte.

Gruß
Jürgen

[MudGuard]

Hi,

• relativ zu einem anderen Element positioniert werden (nämlich zum nächstgelegenen Eltern-Element, das nicht den Defaultwert position:static hat)

streiche Eltern-Element, setze Vorfahren-Element.

Eltern-Element gibt's genau 1.

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo,

Ich suche einen best practice- use case für position:absolute, finde aber nur Quadrate, die willkürlich aus dem Elementfluss genommen werden.

Was würdet ihr dort als gutes Beispiel nehmen?

ob das ein gutes Beispiel ist, weiß ich nicht, aber ich habe vor einigen Jahren mal eine Imagemap mit absoluter Positionierung nachgebaut. Also ein Containerelement mit position:relative, darin ein Bild, und dem Bild überlagert ein paar absolut positionierte Links. AFAIR war das ganze in der Höhe starr, aber in der Breite skalierbar, die left- und width-Angaben der Links daher in Prozent.

Klingt das vernünftig, oder eher von hinten durch die Brust ins Knie?

Faazit soll sein, dass man es eigentlich nie macht!

Sehe ich nicht so. Fast jede Technik hat bestimmte sinnvolle Anwendungsfälle. Es kommt nur darauf an, ein Gespür dafür zu entwickeln, wo es sinnvoll ist und wo nicht: Zum Öffnen von Türen ist Semtex nicht unbedingt das typische Mittel; um einen Fabrikschornstein kontrolliert zum Einsturz zu bringen, vielleicht schon.

Live long and pros healthy,
 Martin

[klawischnigg]

Hi there,

Faazit soll sein, dass man es eigentlich nie macht!

Das halte ich für ein grobe Vereinfachung, die so eigentlich nur stimmt, wenn sich die absolute Positionierung auf das gesamte (HTML-)Dokument bezieht.

Bezogen auf im normalen Fluß befindliche Elemente (die wie wir wissen ihrerseits auf so etwas wie position:relative gesetzt werden müssen) gibts dagegen eigentlich nicht viel zu sagen...

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich suche einen best practice- use case für position:absolute, finde aber nur Quadrate, die willkürlich aus dem Elementfluss genommen werden.

Was würdet ihr dort als gutes Beispiel nehmen?

Den Bildnachweis aufs Bild zu positionieren. Das kann dann auch vertikal sein.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Ich suche einen best practice- use case für position:absolute, finde aber nur Quadrate, die willkürlich aus dem Elementfluss genommen werden.

Was würdet ihr dort als gutes Beispiel nehmen?

Den Bildnachweis aufs Bild zu positionieren. Das kann dann auch vertikal sein.

Danke! Stimmt! und da sind auch keine schwierigen CSS-Selektoren wie .tooltip:hover span[role=tooltip] drin!

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das kann dann auch vertikal sein.

Da hatte ich in diesem Pen doch glatt was eingebaut, was in meinem Browser (Firefox, na klar) noch gar nicht funktioniert hatte: font-size: clamp(1em, 4vw, 1.25em);

Und siehe da, zwei Tage später funktioniert’s plötzlich (neue Version 75). So geht progressive enhancement!

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Da ich auf dieses Posting nicht mehr antworten kann:

@Auge, wirf mal ein solches hierauf: 😀

Da hatte ich in diesem Pen doch glatt was eingebaut, was in meinem Browser (Firefox, na klar) noch gar nicht funktioniert hatte: font-size: clamp(1em, 4vw, 1.25em);

Und siehe da, zwei Tage später funktioniert’s plötzlich (neue Version 75). So geht progressive enhancement!

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Auge]

Hallo

Da ich auf dieses Posting nicht mehr antworten kann:

@Auge, wirf mal ein solches hierauf: 😀

Habe dein Vorposting schon gestern zur Kenntnis genommen. Es freut mich, dass mit der Implementierung im Firefox (leider nur auf dem Desktop, die Mobilversion kann's laut Can I use nicht) nur noch der Safari fehlt. Das ist mMn ein sehr hilfreiches Feature.

Wenn die Pfeifen bei Apple nun bitte auch mal in die Puschen zu kommen gedächten …!

Eine Frage zur Anwendung. Wie bei anderen Eigenschaften auch, wird erst die für alle Browser interpretierbare Schreibweise notiert und danach die, die die älteren Browser ignorieren, oder?

html {
    font-size: 1.05rem;
    font-size: clamp(1em, 1.05rem, 4vw); /* willkürliche Werte */
}

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

Eine Frage zur Anwendung. Wie bei anderen Eigenschaften auch, wird erst die für alle Browser interpretierbare Schreibweise notiert und danach die, die die älteren Browser ignorieren, oder?

html {
    font-size: 1.05rem;
    font-size: clamp(1em, 1.05rem, 4vw); /* willkürliche Werte */
}

Ich wüsste nicht, warum es in diesem Fall nicht so sein sollte.

Bis demnächst
Matthias

[Auge]

Hallo

Eine Frage zur Anwendung. Wie bei anderen Eigenschaften auch, wird erst die für alle Browser interpretierbare Schreibweise notiert und danach die, die die älteren Browser ignorieren, oder?

html {
    font-size: 1.05rem;
    font-size: clamp(1em, 1.05rem, 4vw); /* willkürliche Werte */
}

Ich wüsste nicht, warum es in diesem Fall nicht so sein sollte.

Ich gehe ja auch davon aus, kann das jetzt aber nicht gleich ausprobieren. Deshalb wollte ich hier ein „Ja, natürlich.“ herauskitzeln. 😀 Das mag, mitsamt Beispiel, für spätere Leser hilfreich sein.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Wenn die Pfeifen bei Apple nun bitte auch mal in die Puschen zu kommen gedächten …!

Aber wirklich! Die Pfeifen die! Wenn man min() und max() schon implementiert hat, ist clamp() ja nur noch eine Anwendung davon: “given clamp(MIN, VAL, MAX), it is resolved exactly identically to max(MIN, min(VAL, MAX))” [Spec]

Eine Frage zur Anwendung. Wie bei anderen Eigenschaften auch, wird erst die für alle Browser interpretierbare Schreibweise notiert und danach die, die die älteren Browser ignorieren, oder?

Ja, so hab ich’s im verlinkten Pen auch gemacht (Fallback in der Sammeleigenschaft font).

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Auge]

Hallo

Wenn die Pfeifen bei Apple nun bitte auch mal in die Puschen zu kommen gedächten …!

Aber wirklich! Die Pfeifen die! Wenn man min() und max() schon implementiert hat, ist clamp() ja nur noch eine Anwendung davon: “given clamp(MIN, VAL, MAX), it is resolved exactly identically to max(MIN, min(VAL, MAX))” [Spec]

Was wiederum heißt, aktuell drei Zeilen schreiben zu müssen (font-size: VAL;, font-size: max(MIN, min(VAL, MAX)); und font-size: clamp(MIN, VAL, MAX);), um wirklich alle™️ Browser zu bedienen oder clamp zu ignorieren – min(max()) tut's ja auch. Wenn „die Pfeifen“ min und max nun aber schon ewig™️ unterstützen, warum dann nicht auch clamp nachziehen, um die geschachtelte min(max())-Notation loszuwerden?

Wie bei anderen Eigenschaften auch, wird erst die für alle Browser interpretierbare Schreibweise notiert und danach die, die die älteren Browser ignorieren, oder?

Ja, so hab ich’s im verlinkten Pen auch gemacht (Fallback in der Sammeleigenschaft font).

Danke für die hiesige Klarstellung.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Was wiederum heißt, aktuell drei Zeilen schreiben zu müssen (font-size: VAL;

Das erscheint mir zu gefährlich. Da kann der Wert ja jenseits von Gut und Böse werden (jenseits von MIN und MAX).

Mir erscheint es sinnvoller, als Fallback MIN oder MAX zu wählen – welchen der beiden, hängt vom Anwendungsfall ab. Oder auch den Mittelwert als Fallback.

font-size: max(MIN, min(VAL, MAX)); und font-size: clamp(MIN, VAL, MAX);)

Wenn man das Erste davon hat, könnte man auf das Letztere (was ja dasselbe tut) verzichten. Es macht allerdings den Code besser lesbar.

Um aus Letzterem automatisch Erstes zu generieren, also clamp() für Safari zu übersetzen, bietet sich ein PostCSS-Plugin an.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

PS: In diesem Pen hab ich einige clamp()s drin.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Um aus Letzterem automatisch Erstes zu generieren, also clamp() für Safari zu übersetzen, bietet sich ein PostCSS-Plugin an.

Oder eine Sass-Funktion.

PS: In diesem Pen hab ich einige clamp()s drin.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Auge]

Hallo

Was wiederum heißt, aktuell drei Zeilen schreiben zu müssen (font-size: VAL;

Das erscheint mir zu gefährlich. Da kann der Wert ja jenseits von Gut und Böse werden (jenseits von MIN und MAX).

Du willst uns jetzt hier alle verkackeiern, oder? Laut MDN ist der Wert von dem, was du in deinen Beispielen als VAL bezeichnest, in clamp der präferierte Wert.

„The clamp() function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value, maximum value.“

Demnach ist VAL jener Wert, den man seit Jahrzehnten auch in font-size in der klassischen Notation mit nur einem Wert verwenden würde. Was soll daran jetzt „gefährlich“, oder genauer gesagt gefährlicher als in den letzten 20 Jahren, in denen man das immer so geschrieben jat, sein?

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Du willst uns jetzt hier alle verkackeiern, oder?

Nein, ganz und gar nicht.

Laut MDN ist der Wert von dem, was du in deinen Beispielen als VAL bezeichnest, in clamp der präferierte Wert.

In gewissen Grenzen – denen von MIN und MAX gesetzten.

Demnach ist VAL jener Wert, den man seit Jahrzehnten auch in font-size in der klassischen Notation mit nur einem Wert verwenden würde. Was soll daran jetzt „gefährlich“, oder genauer gesagt gefährlicher als in den letzten 20 Jahren, in denen man das immer so geschrieben jat, sein?

Nehmen wir das schon genannte Beispiel font-size: clamp(1em, 4vw, 1.25em). Wenn man als Fallback font-size: 4vw nimmt, ergibt sich bei 1440px breitem Viewport (MacBook) eine Schriftgröße von 57.6px – viel zu groß für Textschrift. Bei 320px breitem Viewport (iPhone SE) ergeben sich mickrige 12.8px – zu klein zum Lesen.

Deshalb ist als Fallback font-size: 1em sinnvoll oder auch 1.25em oder irgendwas dazwischen.

Und nein, das hat man die letzten 20 Jahre nicht so geschrieben – da gab’s vw noch gar nicht.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Auge]

Hallo

Laut MDN ist der Wert von dem, was du in deinen Beispielen als VAL bezeichnest, in clamp der präferierte Wert.

In gewissen Grenzen – denen von MIN und MAX gesetzten.

Ja natürlich. Ich bin davon ausgegangen, dass der geneigte CSS-Autor für die Schriftgröße ohne die „moderne Magie“ einen sinnvollen Wert wählt. Warum sollte das nun, nachdem es jahrzehntelang auf diese Weise getan wurde, auf einmal anders sein?

Demnach ist VAL jener Wert, den man seit Jahrzehnten auch in font-size in der klassischen Notation mit nur einem Wert verwenden würde. Was soll daran jetzt „gefährlich“, oder genauer gesagt gefährlicher als in den letzten 20 Jahren, in denen man das immer so geschrieben jat, sein?

Nehmen wir das schon genannte Beispiel font-size: clamp(1em, 4vw, 1.25em). Wenn man als Fallback font-size: 4vw nimmt, ergibt sich bei 1440px breitem Viewport (MacBook) eine Schriftgröße von 57.6px – viel zu groß für Textschrift. Bei 320px breitem Viewport (iPhone SE) ergeben sich mickrige 12.8px – zu klein zum Lesen.

Deshalb ist als Fallback font-size: 1em sinnvoll oder auch 1.25em oder irgendwas dazwischen.

Und nein, das hat man die letzten 20 Jahre nicht so geschrieben – da gab’s vw noch gar nicht.

Ich habe nirgends davon geschrieben, dass für VAL ein Wert mit der Einheit vw genutzt werden müsste. Ih habe auch nirgends geschrieben, dass der Wert von VAL für font-size: $irgendeinWert; identisch zu dem Wert der Schreibweise font-size: max(min()); oder font-size: clamp(); sein müsste.

Aber so ist das halt, wenn man mit einem abstrusen, herbeikonstruierten Beispiel lächerlich gemacht wird. Danke für nichts.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Ich bin davon ausgegangen, dass der geneigte CSS-Autor für die Schriftgröße ohne die „moderne Magie“ einen sinnvollen Wert wählt.

Ja, sag ich doch. 1em ist ein sinnvoller Wert, 1.25em auch. 4vw ist es nicht.

Ich habe nirgends davon geschrieben, dass für VAL ein Wert mit der Einheit vw genutzt werden müsste.

Nicht? Ich zitiere: „Demnach ist VAL jener Wert, den man seit Jahrzehnten auch in font-size in der klassischen Notation mit nur einem Wert verwenden würde.“

VAL war im gewählten Bespiel 4vw.

Aber so ist das halt, wenn man mit einem abstrusen, herbeikonstruierten Beispiel lächerlich gemacht wird.

Nix herbeikonstruiert. Das Beispiel war zuerst da – von Anfang an.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!