Position

[Franz]

Ich habe gerade ein paar Tests mit "position" gemacht. Zum Sichtbarmachen verwende ich border und Free Ruler zum abmessen der px.
Die Anzeige eines Textes erfolgt je nach Element h, p, div, etc. vom Abstand des body aus. Interessanterweise bewirkt body {margin: 0;} lediglich die Stelle 0 an der linken Seite. Oben bleibt ein Abstand je nach Element. Bei einem eingegebenen Text reicht border bis zum Ende der rechten Seite. Sobald ich position: absolute eingebe verkürzt sich der Rand automatisch auf die Textgrößte. Sonst passiert nichts. Zur Berechnung der Position müßte man auch die Standard-Abstände der Elemente wissen um sie zu "em" oder "px" addieren zu können. Soweit ich verstanden habe, gilt für "position: absolute" die Startposition des Elternelementes. Wenn ich also

<div1>

<p>Das ist ein p-Text</p>

</div>
und

<div2>

<p>Das ist ein p-Text</p>

</div>

habe, so werden sie untereinander gereiht. Margin-top setzt sie ausgehend vom body an die gewünschte Stelle unabhängig ob absolute oder relative. Der Ort wird durch Attribute festgelegt und lediglich border verkürzt sich auf die Satzlänge. Man könnte eigentlich um diesen Rand zu erhalten position: absolute ohne height, etc. alleine setzen?

Gebe ich div2 innerhalb div1 sieht die Sache anders aus.

1. Verschiebt es in div2 "Text" in die nächste Zeile obwohl an der Breite nichts geändert wird.
2. Bei beiden absolute ändert sich sonst überhaupt nichts.
3. Setze ich div1 auf relative wird border wieder seitenbreit und in div2 rutscht der Text wieder in eine Zeile.
4. Setze ich div2 relative so bleibt dessen Text in einer Zeile, die Höhe von div1 erhöht sich um fast 60px und die Oberkante des div2 orientiert sich an Unterkannte von div1.

Im Prinzip orientieren sich sowohl absolute als auch relative am Elternelement. Lediglich ist der Abstand dazu zu rechnen die die einzelnen Elemente standardmäßig dabei haben. Der Rest ist für mich anscheinend das Eigenleben von HTML bzw. CSS. Wozu der unterschiedliche Gebrauch?

Letzte Frage noch: Soll unabhängig ob es ein div oder mehrere gibt immer ein Selektor genommen werden?

LG Franz

[Gunnar Bittersmann]

@@Franz

Zum Sichtbarmachen verwende ich border

border beeinflusst das Verhalten, z.B. beim Zusammenfallen von Abständen. Zum Sichtbarmachen dürfte outline besser geeignet sein.

und Free Ruler zum abmessen der px.

Wozu sollte man das brauchen? Pixel-perfekt?

Die Anzeige eines Textes erfolgt je nach Element h, p, div, etc. vom Abstand des body aus. Interessanterweise bewirkt body {margin: 0;} lediglich die Stelle 0 an der linken Seite. Oben bleibt ein Abstand je nach Element.

Ja, der im Browserstylesheet für das jeweilige Element festgelegte margin-top.

Bei einem eingegebenen Text reicht border bis zum Ende der rechten Seite.

Blockelemente gehen über die volle Breite [CSS 2.2] …

Sobald ich position: absolute eingebe verkürzt sich der Rand automatisch auf die Textgrößte.

… aber nicht bei absoluter Positionierung, da tritt shrink to fit auf. [CSS 2.2]

Sonst passiert nichts.

Doch. Das Element wird aus dem Fluss genommen, d.h nachfolgende Elemente werden so angeordnet, als ob das absolut positionierte Element gar nicht da wäre.

Soweit ich verstanden habe, gilt für "position: absolute" die Startposition des Elternelementes.

Nein. Absolute Positionierung bezieht sich auf das nächste positionierte (relativ, absolut, fix) Vorfahrenelement. Das kann das das Elternelement sein, aber auch ein früherer Vorfahre. Wenn es kein positioniertes Vorfahrenelement gibt, bezieht sich absolute Positionierung auf den Viewport.

Den Rest müsste ich mir noch dreimal durchlesen, bevor ich verstehe, was du meinst.

Letzte Frage noch: Soll unabhängig ob es ein div oder mehrere gibt immer ein Selektor genommen werden?

Selektoren so kurz wie möglich, nur so spezifisch wie nötig.

LLAP 🖖

[Franz]

@@Franz

border beeinflusst das Verhalten, z.B. beim Zusammenfallen von Abständen. Zum Sichtbarmachen dürfte outline besser geeignet sein.

Habe den Rat befolgt und die Berechnungen mit Free Ruler sind nun korrekt.

Wozu sollte man das brauchen? Pixel-perfekt?

http://www.pascal.com/software/freeruler/
Ich kann vergleichen wie und wo bestimmte Werte Wirkung zeigen.

Ja, der im Browserstylesheet für das jeweilige Element festgelegte margin-top.

Habe ich auch angenommen.

Bei einem eingegebenen Text reicht border bis zum Ende der rechten Seite.

Blockelemente gehen über die volle Breite [CSS 2.2] …

Sobald ich position: absolute eingebe verkürzt sich der Rand automatisch auf die Textgrößte.

… aber nicht bei absoluter Positionierung, da tritt shrink to fit auf. [CSS 2.2]

Sonst passiert nichts.

Doch. Das Element wird aus dem Fluss genommen, d.h nachfolgende Elemente werden so angeordnet, als ob das absolut positionierte Element gar nicht da wäre.

Die Frage bezog sich lediglich auf die Verkürzung auf Textlänge. Das könnte man anwenden wenn man die langen Rahmen eingrenzen möchte ohne das Element zu versetzen? Soferne ich kein top oder sonstige Zuweisung treffe bleibt alles wie es ist außer eben der Rahmen.

Soweit ich verstanden habe, gilt für "position: absolute" die Startposition des Elternelementes.

Nein. Absolute Positionierung bezieht sich auf das nächste positionierte (relativ, absolut, fix) Vorfahrenelement. Das kann das das Elternelement sein, aber auch ein früherer Vorfahre. Wenn es kein positioniertes Vorfahrenelement gibt, bezieht sich absolute Positionierung auf den Viewport.

"Das mit absolute positionierte Element "sucht" quasi seine Elternelemente der Reihe nach durch, ob eines davon mit position: positioniert wurde. Dies ist für keines der Elternelemente span, p, body und html der Fall. Der "älteste" Vorfahr, um in Analogie zu einem Stammbaum zu sprechen, ist html, an ihm richtet sich der Link aus."
Soweit ich das wortwörtlich verstehe ist bei absolute der Ausgangspunkt das Elternelement. Ist das so gemeint, daß mit Vorfahre (Elternelement) jenes Element gemeint ist, das "position" enthalten muß; sonst wird der Viewport genommen?

Letzte Frage noch: Soll unabhängig ob es ein div oder mehrere gibt immer ein Selektor genommen werden?

Selektoren so kurz wie möglich, nur so spezifisch wie nötig.

Und immer anwenden auch wenn beispielsweise "div" nur einmal vorkommt?

LG Franz

[Matthias Apsel]

Hallo Franz,

siehe auch http://selfhtml.apsel-mv.de/position/position.html

Bis demnächst
Matthias