CSS sorgt dafür, dass der untergeordnete Container das übergeordnete Element übersteigt (der untergeordnete Container schwebt im übergeordneten Container).

Vorwort

Manchmal benötigen wir eine Floating-Effekt-Anforderung wie in der folgenden Abbildung:

erreichen

In Standardsituationen ist dies nur durch die Verwendung絕對定位möglich.

Schritt 1: Stellen Sie die Positionierung des übergeordneten Containers auf relativ ein.

Schritt 2: Stellen Sie die Untercontainerpositionierung auf absolut ein.

<div id="ein">
   <div id="b">Ich will rausschweben! </div>
</div>

#A{
  Breite: 400px;
  Höhe: 100px;
  Hintergrund: RGB (0, 0, 0);
  position:relative;/*Übergeordnetes Element>relative Positionierung*/
}

#B{
  Breite: 150px;
  Höhe: 50px;
  Hintergrund: RGB (185, 155, 255);
  position:absolute;/*Unterelement>absolute Positionierung*/
  oben: -30px;/*schwebende Steuerung*/
  /* links:XX; */
}

Effektbild:

Das übergeordnete Element wird auf絕對定位eingestellt und das untergeordnete Element auf相對定位, d. h. das untergeordnete Element wird entsprechend dem übergeordneten Element positioniert.

Hinweis: Nur untergeordnete Elemente befinden sich außerhalb des Dokumentflusses. Das übergeordnete Element ist relativ positioniert und befindet sich nicht außerhalb des Dokumentflusses, sodass es keine Seitenfehlausrichtung verursacht.

Damit ist dieser Artikel über die Verwendung von CSS zum Erweitern von untergeordneten Containern über übergeordnete Elemente hinaus (der Effekt von untergeordneten Containern, die in übergeordneten Containern schweben) abgeschlossen. Weitere Informationen zur Verwendung von CSS zum Erweitern von untergeordneten Containern über übergeordnete Elemente hinaus finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!