Warum befinden sich meine absolut/fest positionierten Elemente nicht dort, wo ich sie erwarte?

Question 1

Ich lerne gerade die Positionierung in CSS. Basierend auf dem Artikel, den ich nützlich fand, hatte ich angefangen, herumzuspielen.

Mit dem folgenden Code kann ich nicht verstehen, warum das absolute Grey-Box-Div außerhalb seines relativen Elternteils liegt. Ich habe erwartet, dass sich das graue Kästchen in der oberen linken Ecke des Containers befindet.

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-orange"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

Kann im folgenden Fall auch nicht verstehen, warum das graue Kästchen nicht in der oberen linken Ecke, sondern nach dem leeren Raum verschoben wurde, den das orange Kästchen dort hinterlassen hat. Ich habe gerade das graue Kästchen an die zweite Stelle innerhalb des Containers div verschoben.

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-orange"></div>
  <div class="box-grey"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
</div>

Alle ausführlichen Dokumentationen (z. B. MDN) und Tutorials, die ich gefunden habe, demonstrieren nur sehr einfache Beispiele mit 2-3 Boxen.

Question 2

Um dies richtig zu verstehen, müssen Sie sich auf die beziehen offizielle Spezifikation wo Sie die Gleichung das Element finden Muss erfüllen:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

Wir haben keinen Rand und keine Polsterung, also wird es in Ihrem Fall einfach sein:

'top' + 'margin-top' + 'height' + 'margin-bottom' + 'bottom' = height of containing block

Und wenn Sie unten lesen, finden Sie Folgendes:

‘top’ und ‘bottom’ sind ‘auto’ und ‘height’ ist nicht ‘auto’, dann setze ‘top’ auf die statische Positionsetze die ‘auto’-Werte für ‘margin-top’ und ‘margin-bottom’ auf 0 und löse nach ‘bottom’ auf.

In Ihrem Fall haben Sie also eine Höhe festgelegt und beibehalten top/bottom auf auto wird also top gesetzt statische Stellung

.. Genauer gesagt ist die statische Position für ‘top’ der Abstand von der oberen Kante des umgebenden Blocks zur oberen Randkante einer hypothetischen Box, die die erste Box des Elements gewesen wäre, wenn ihr angegebener ‘position’-Wert gewesen wäre war ‘statisch’..

Um es einfach zu machen, es ist die Position des Elements, wenn Sie es nicht festgelegt haben position:absolute.

Hier ist eine einfache Illustration zum besseren Verständnis

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

.box-green {
  height:20px;
  background:green;
}

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey">I am absolute</div>
</div>

Beachten Sie die statische Position des ersten Elements, das beibehalten wird, wenn wir hinzufügen position:absolute. Wir haben keinen Top-Wert angegeben, daher verwendet der Browser einen Standardwert, der der von ist position:static (Standardposition) des Elements.

Wenn Sie das nicht möchten, stellen Sie einfach den oberen Wert ein und Sie fallen in diese Regel:

‘bottom’ ist ‘auto’, ‘top’ und ‘height’ sind nicht ‘auto’, dann setze die ‘auto’-Werte für ‘margin-top’ und ‘margin-bottom’ auf 0 und löse nach ‘bottom’ auf

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
  top:0;
}

.box-green {
  height:20px;
  background:green;
}

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

Dieselbe Logik gilt für das linke Eigentum

Sie können auch die Verwendung des Wortes bemerken Block enthält was hier sehr wichtig ist und in der erklärt wird gleiche Spezifikation

Die Position und Größe der Kästchen eines Elements werden manchmal relativ zu einem bestimmten Rechteck berechnet, das als umschließender Block des Elements bezeichnet wird. Der enthaltende Block eines Elements ist wie folgt definiert:

…

Wenn das Element ‘Position: absolut’ hat, wird der umgebende Block durch den nächsten Vorfahren mit einer ‘Position’ von ‘absolut’, ‘relativ’ oder ‘fixed’ auf folgende Weise festgelegt:

…

Und das reicht nicht aus, da es noch andere Eigenschaften (unten aufgeführt) gibt, die ebenfalls einen umschließenden Block einrichten, sodass Sie ein Element relativ zu einem nicht positionierten Vorfahren positionieren können!

Verwandte: Warum bricht das Anwenden eines CSS-Filters auf das übergeordnete Element die Positionierung des untergeordneten Elements?

Question 3

Sie müssen immer eingestellt werden top:0; left:0; auf absolut positionierte Elemente (oder beliebige Werte für oben, rechts, unten, links).

Question 4

Zunächst wird das Element relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement positioniert.

In diesem Fall funktioniert die absolute Position mit dem Geschwister, nicht mit dem Vorfahren.

Über die Vorfahren und Geschwister gibt es eine gute Dokumentation darüber: Vorfahren und Geschwister

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-grey"></div>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
</div>

Wenn ich das Element nach dem div-Container setze, funktioniert alles ohne Probleme

Dokumentation der Stellung

Im zweiten Teil erscheint dieses Kästchen dort, weil das Kästchen-Gery oben und rechts vom Kästchen-Grün keine Rolle spielt, verstanden? Ich nenne ein Beispiel:

.container {
  background: lightblue;
  position: relative;
}

.box-orange2 {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  z-index: 2;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

.box-yellow {
  background: yellow;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-orange2"></div>
  <div class="box-grey"></div>
  <div class="box-orange"></div>
  <div class="box-yellow"></div>
</div>

Sie können sehen, dass die grauen und gelben Kästchen das Verhalten nicht ändern, selbst wenn sich oben und rechts im Geschwister befinden oder nicht.