Elemente positionieren

[Gunnar Bittersmann]

@@Shiela

ein Textfeld ("Text")

Hast du noch mehr Text auf der Seite als in diesem Feld? Dann ist „Text“ kein gut gewählter Bezeichner.

auch wenn die margins der beiden gleich sind...

Nö, sind sie nicht.

Nehmen wir mal an, der Viewport ist 1000px breit.

h1 {text-align: center; font-family:'Lemonada'; font-size: 250%; border-style: solid; background-color: #D8D8D8; border-radius: 8px; border-color: black; margin: 2%}

Die Abstand von h1 berechnet sich aus der Breite des Containers, vermutlich des body. Dieser hat vom Browserstylesheet vorgegebenen Außenabstand; das dürften in den meisten Browsern 8px sein. Macht also 984px Breite.

2% davon sind 19.68px.^[1] Hinzu kommen die o.g. 8px zum Viewportrand. Macht 27.68px.

#Text {background-color: #D8D8D8; position: absolute; left: 30%; margin-top: 10px; border-style: solid; border-color: black; border-radius: 5px; margin-right: 2%}

Durch die absolute Positionierung richtet sich hier alles nach der nächst höheren positionierten^[2] Box, wenn es keine solche gibt (was bei dir wohl der Fall sein dürfte) nach dem Viewport.

2% von 1000px sind 20px – das ist auch der Abstand vom Seitenrand.

Macht einen Unterschied von 7.68px.^[3] Oder wie du es nennst: „automatischer Zusatzrand“.

Der verschwindet bei h1, wenn du den Außenabstand des body auf 0 setzt. Der kommt auch bei #Text hinzu, wenn body ein positioniertes Element ist. Kannst du beides in diesem Codepen ausprobieren.

Was aber nicht heißen soll, dass du eins davon tun solltest. Du solltest auf die absolute Positionierung verzichten. Was wolltest du damit erreichen?

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

---

1. Nach meiner Rechnung. Die berechneten Werte in Browsern weichen geringfügig davon ab. ⁇ ↩︎

2. position-Eigenschaft mit anderem Wert als dem Ausgansgswert static ↩︎

3. Noch viel größer ist der Unterschied übrigens, wenn #Text wenig Text enthält. Durch die absolute Positionierung ist die Box nur so breit wie nötig (shrink to fit). ↩︎