In der Klasse haben wir gelernt, dass, wenn ich zwei divs habe: ein Wrapperdiv (nennen wir es div A
), das als position: relative;
definiert ist und ein anderes div, div B
das ist innerhalb div A
mit position: absolute;
.
Was passieren wird ist, dass jetzt die Position von div B
von der Position von div A
abhängt. Das heißt, dass jetzt der Punkt 0,0 von div B
nicht der Punkt 0,0 des Browsers ist, sondern div A
. Also, wenn ich div A
sagen würde 20 Pixel nach rechts und div B
30 Pixel nach rechts, wäre div B
50 Pixel rechts vom Browser-Punkt 0,0;
Nun, meine Frage ist: Was ist, wenn ich drei divs habe? Div A, das position: relative;
ist, div B
, das ist position: absolute
, und div B
, ein anderes div (div C
) mit position: absolute;
. Nun, wie wird sich Div C verhalten? Ist seine Position 0,0 die von div A
oder div B
?
Vielen Dank im Voraus.
code:
%Vor%Ich muss diesen beiden großartigen Antworten nicht viel hinzufügen, aber hier ist ein Artikel, der mir geholfen hat, das Konzept zu verstehen. Ссылка
Dieser Artikel behandelt, dass ein div mit absoluter Position auf dem inneren Gitter seines nächsten Vorfahren (Eltern, Großeltern usw.) positioniert ist, das fest, relativ oder absolut ist. Wenn es keine gibt, ist es relativ zum HTML-Dokument, aber beachten Sie, dass es sich immer noch anders verhält als behoben. Es umfasst auch die wichtigsten Unterschiede zwischen den drei Positionstypen sowie den statischen Positionstyp.
statisch - Dies ist die Standardposition, in der keine Gitter für absolut positionierte divs für Kinder erstellt werden. Sie können die CSS-Eigenschaften top
left
right
oder bottom
nicht verwenden.
relativ - erstellt ein Raster für nachgeordnete (Kinder, Enkel usw.) absolut positionierte divs. Sie können oben, links, rechts und unten verwenden, aber sie bewegen es "relativ" dahin, wo es vorher war. Bei der Verwendung von oben, links, rechts und unten gehen andere Elemente immer noch umher, wo sie vorher waren.
absolut - erstellt ein Raster für absteigende (Kinder, Enkel usw.) absolut positionierte divs. Sie können oben, links, rechts und unten verwenden, aber sie verschieben es relativ zum nächsten Vorfahren (Eltern, Großeltern, etc.) Raster. Beachten Sie, dass die Raster durch feste, absolute und relative Elemente erstellt werden. Bei Verwendung von oben, links, rechts und unten verlässt das Element den Fluss des Dokuments. (Dies bedeutet, dass andere Elemente durchlaufen werden.)
fixed - erstellt ein Raster für absolut positionierte divs für Kinder. Sie können oben, links, rechts und unten verwenden, aber sie bewegen es relativ zum Browser. Bei der Verwendung von oben, links, rechts und unten verlässt den Fluss des Dokuments. (Dies bedeutet, dass andere Elemente durchlaufen werden.)