Detaillierte Erläuterung der Lösung zur festen Positionierung von CSS-Unterelementen relativ zum übergeordneten Element

Grundlegende Konzepte

Absolute Positionierung: Ein auf absolute Positionierung eingestelltes Elementfeld wird vollständig aus dem Dokumentfluss entfernt und relativ zu seinem enthaltenden Block positioniert. Dabei kann es sich um ein anderes Element im Dokument oder um den anfänglichen enthaltenden Block handeln. Der Platz, den das Element zuvor im normalen Dokumentfluss eingenommen hat, wird geschlossen, als ob das Element nicht existierte. Ein positioniertes Element generiert eine Box auf Blockebene, unabhängig davon, welchen Boxtyp es ansonsten im normalen Ablauf generieren würde.

https://www.w3school.com.cn/css/css_positioning_absolute.asp

Relative Positionierung: Das auf relative Positionierung eingestellte Elementfeld wird um eine bestimmte Distanz versetzt. Das Element behält seine unpositionierte Form und der Platz, den es ursprünglich eingenommen hat, bleibt erhalten.

https://www.w3school.com.cn/css/css_positioning_relative.asp

Problemanalyse

Ein absolut positioniertes Element wird relativ zu seinem nächsten positionierten Vorgänger positioniert. Wenn das Element keinen positionierten Vorgänger hat, wird es relativ zu seinem anfänglichen umschließenden Block positioniert.

Das Wichtigste bei der Positionierung ist, sich zu merken, was die einzelnen Punkte bedeuten. Lassen Sie uns also noch einmal wiederholen, was wir gelernt haben: Die relative Positionierung ist relativ zur Anfangsposition des Elements im Dokument, während die absolute Positionierung relativ zum nächstgelegenen positionierten Vorgänger ist, oder, falls kein positionierter Vorgänger vorhanden ist, zum anfänglichen enthaltenden Block.

Hinweis: Je nach Benutzeragent kann der anfängliche enthaltene Block die Zeichenfläche oder ein HTML-Element sein.

Tipp: Da absolut positionierte Boxen vom Dokumentfluss unabhängig sind, können sie andere Elemente auf der Seite überlappen. Sie können die Stapelreihenfolge dieser Boxen steuern, indem Sie die Z-Index-Eigenschaft festlegen.

Lösung

<div Klasse="Assistent">
  <div Klasse="übergeordnet">
    <div Klasse="Kind"></div>
    <div Klasse="Platzhalter"></div>
  </div>
</div>

<Stil>
.assistor {
  Position: relativ; /*Schlüsselpunkt*/
  Anzeige: Block;
  Breite: 500px;
  Höhe: 300px;
  Rand: 100px auto 0 auto;
  Hintergrundfarbe: #ddd;
}
.übergeordnet {
  Breite: 500px;
  Höhe: 300px;
  Hintergrundfarbe: #888;
  Überlauf: automatisch; /*Wichtiger Punkt*/
}
.Kind {
  Position: absolut; /*Schlüsselpunkt*/
  Breite: 120px;
  Höhe: 120px;
  Rand: 100px 50px;
  Hintergrundfarbe: #333;
}
.Platzhalter {
  Breite: 1000px;
  Höhe: 1000px;
}
<Stil>

Das untergeordnete Element wird relativ zur Assistentposition positioniert: absolut, und der Inhalt im übergeordneten Element ist für die eigene Anzeige verantwortlich.

Solange der Assistent dieselbe Größe wie das übergeordnete Element hat, sieht es so aus, als sei das untergeordnete Element im Verhältnis zum übergeordneten Element fixiert.

Spezifisches Prinzip: Das Element mit der Position „absolut“ wird relativ zum ersten Vorgängerelement mit der Position „relativ“ positioniert. Stellen Sie den Assistenten auf „position: relativ“ ein. Die Bildlaufleiste befindet sich im übergeordneten Element mit der Position „fest“. Dadurch wird das Scrollen des Inhalts im übergeordneten Element erreicht.

Verweise

https://www.cnblogs.com/qqfontofweb/p/7813718.html

Damit ist dieser Artikel mit der detaillierten Erläuterung der CSS-Lösung für die feste Positionierung von untergeordneten Elementen relativ zu übergeordneten Elementen abgeschlossen. Weitere relevante CSS-Inhalte zur festen Positionierung relativ zu übergeordneten Elementen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten aufgeführten verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!