Warum zentriert “Position: absolut; links: 0; rechts: 0; Breite: XYpx; Rand: 0 automatisch” eigentlich?

Lesezeit: 3 Minuten

Warum zentriert Position absolut links 0 rechts 0 Breite
Mary ist tot

Ich bin ziemlich bewandert, wenn es um CSS geht, aber heute bin ich über ein Snippet gestolpert, das mir Kopfzerbrechen bereitet hat (hier und hier).

Ich hätte nie gedacht, dass man ein absolut positioniertes Element über zentrieren kann margin: 0 auto aber vorausgesetzt, das betreffende Element hat eine festgelegte Breite und es gibt left: 0 und right: 0, es scheint tatsächlich zu funktionieren:

#parent
{
    background: #999;
    height: 300px;
    position: relative;
    width: 300px;
}

#child
{
    background: #333;
    height: 50px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
}
<div id="parent">
    <div id="child"></div>
</div>

(JSFiddle)

Ich dachte immer left: 0 und right: 0 bestimmt die Breite des Elements (100% des ersten relativ positionierten übergeordneten Elements), aber es scheint width hat hier Vorrang und macht daher margin: 0 auto arbeiten.

Ist das definiertes Verhalten? Kann ich in irgendeiner Spezifikation etwas darüber finden? Ich habe ein bisschen gegoogelt, aber nichts brauchbares gefunden.

  • Sehen smashingmagazine.com/2013/08/09/…

    – j08691

    25. März 15 um 16:49 Uhr

  • @ j08691 das ist in der Tat ein guter Link. Ich mag den Schritt durch den CSS-Prozess

    – Martin

    25. März 15 um 16:57 Uhr

1642738326 900 Warum zentriert Position absolut links 0 rechts 0 Breite
BoltClock

Dies wird in verrechnet Abschnitt 10.3.7 der CSS2.1-Spezifikation:

Die Einschränkung, die die verwendeten Werte für diese Elemente bestimmt, ist:

‘left’ + ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + ‘right ‘ = Breite des umgebenden Blocks

Wenn keiner der drei ‘auto’ ist: Wenn sowohl ‘margin-left’ als auch ‘margin-right’ ‘auto’ sind, lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder gleiche Werte erhalten […]

Wie Sie sehen können, verhalten sich automatische Ränder auf beiden Seiten für absolut positionierte Elemente genauso wie für nicht positionierte Elemente auf Blockebene, vorausgesetzt, dass die left und right Offsets, sowie width, sind nicht automatisch.

Interessanterweise nur für absolut positionierte Elemente, Dies gilt für top, height und bottom sowie, was im Wesentlichen bedeutet, dass es möglich ist, ein absolut positioniertes Element mithilfe von automatischen Rändern vertikal zu zentrieren. Dies gilt wiederum unter der Voraussetzung, dass die drei oben genannten Eigenschaften nicht automatisch sind und die jeweiligen Ränder automatisch sind. (In Ihrem Fall bedeutet dies margin: auto eher, als margin: 0 auto da letzteres die vertikalen Ränder auf Null setzt.)

  • Dies ist die kanonische Antwort!

    – Hashem Qolami

    25. März ’15 um 17:20 Uhr

  • Danke für den Hinweis auf die Spezifikation. Ich habe es durchsucht, wusste aber nicht genau, wonach ich suchen sollte.

    – Mary ist tot

    26. März 15 um 08:21 Uhr

Warum zentriert Position absolut links 0 rechts 0 Breite
Paulie_D

Die Eigenschaften left und right (und top und bottom) definieren nicht die Breite an sich sondern der Ausgleich der relativen Margen von der jeweiligen Elternseite.

Im Abwesenheit einer definierten Breite und mit als Null deklarierten Offsets wird die Breite anhand der Offsets berechnet.

Wenn Sie dem Block eine Breite oder Höhe zuweisen, wird verhindert, dass der Block den gesamten verfügbaren Platz einnimmt, und der Browser wird gezwungen, margin: auto basierend auf dem neuen Begrenzungsrahmen zu berechnen

MDN – auf “Oben” … und das gleiche gilt für die anderen Eigenschaften.

Für absolut positionierte Elemente (solche mit position: absolute oder position: fixed) gibt es den Abstand zwischen der oberen Randkante des Elements und der oberen Kante seines umgebenden Blocks an.

Smashing-Magazin-Artikel mit mehr Details

Danke an j08691 für den Link

  • (Der Link kam zuerst aus dem Kommentar von j08691)

    – Martin

    25. März 15 um 16:58 Uhr

  • Entsprechend aktualisiert, da der andere nun gelöscht wurde.

    – Paulie_D

    25. März 15 um 16:59 Uhr


  • „Ohne definierte Breite“ werden in diesem Fall die Versätze mit Null deklariert, die Breite wird also anhand der Versätze berechnet und nicht umgekehrt. Daher “auto” Breite.

    – BoltClock

    25. März 15 um 17:23 Uhr


  • Tolle Antwort, es war schwer zu entscheiden, wo ich hier das Häkchen setzen soll.

    – Mary ist tot

    26. März 2015 um 08:18 Uhr

  • @maryisdead Ich würde es BoltClock geben (was du, wie ich sehe, hast). Er hat geholfen, meine Antwort zu verbessern.

    – Paulie_D

    26. März 15 um 10:44 Uhr

.

570950cookie-checkWarum zentriert “Position: absolut; links: 0; rechts: 0; Breite: XYpx; Rand: 0 automatisch” eigentlich?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy