Elemente positionieren
bearbeitet von 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.[^berechnet] Hinzu kommen die o.g. 8px zum Viewportrand. Macht 27.68px.
[^berechnet]: Nach meiner Rechnung. Die berechneten Werte in Browsern weichen geringfügig davon ab. ⁇
> `#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[^positioniert] Box, wenn es keine solche gibt (was bei dir wohl der Fall sein dürfte) nach dem Viewport.
[^positioniert]: `position`-Eigenschaft mit anderem Wert als dem Ausgansgswert `static`
2% von 1000px sind 20px – das ist auch der Abstand vom Seitenrand.
Macht einen Unterschied von 7.68px.[^Unterschied] Oder wie du es nennst: *„automatischer Zusatzrand“*.
[^Unterschied]: 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)*{:@en}.
Der verschwindet bei `h1`, wenn du den Außenabstand auf 0 setzt. Der kommt auch bei `#Text` hinzu, wenn `body` ein positioniertes Element ist. Kannst du beides in [diesem Codepen](https://codepen.io/gunnarbittersmann/pen/KKzzPvJ?editors=0100) 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!**
{:@en}
--
*“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai
{:@en}
Elemente positionieren
bearbeitet von 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.[^berechnet] Hinzu kommen die o.g. 8px zum Viewportrand. Macht 27.68px.
[^berechnet]: Nach meiner Rechnung. Die berechneten Werte in Browsern weichne geringfügig davon ab. ??
> `#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[^positioniert] Box, wenn es keine solche gibt (was bei dir wohl der Fall sein dürfte) nach dem Viewport.
[^positioniert]: `position`-Eigenschaft mit anderem Wert als dem Ausgansgswert `static`
2% von 1000px sind 20px – das ist auch der Abstand vom Seitenrand.
Macht einen Unterschied von 7.68px.[^Unterschied] Oder wie du es nennst: *„automatischer Zusatzrand“*.
[^Unterschied]: 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)*{:@en}.
Der verschwindet bei `h1`, wenn du den Außenabstand auf 0 setzt. Der kommt auch bei `#Text` hinzu, wenn `body` ein positioniertes Element ist. Kannst du beides in [diesem Codepen](https://codepen.io/gunnarbittersmann/pen/KKzzPvJ?editors=0100) 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!**
{:@en}
--
*“Turn off CSS. If the page makes no sense, fix your markup.”* —fantasai
{:@en}