CSS-Positionierung von DIVs (absolut innerhalb relativ)

7

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%     
William Northern 21.09.2013, 11:51
quelle

4 Antworten

14

Wie Sie aus diesem JSFiddle entnehmen können, ist die Position von "C" div relativ zu seinem Vater "B" mit

%Vor%     
ReDEyeS 21.09.2013 12:17
quelle
6

Ich muss diesen beiden großartigen Antworten nicht viel hinzufügen, aber hier ist ein Artikel, der mir geholfen hat, das Konzept zu verstehen. Ссылка

BEARBEITEN:

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.)

    
John 21.09.2013 21:07
quelle
4

Div B - Jedes absolut positionierte Element wird entsprechend seiner nächstliegenden Position (absolut, relativ oder fest) positioniert .

    
Adam 21.09.2013 12:11
quelle
0

Es ist eine Frage der persönlichen Vorliebe, aber dieser Artikel war derjenige, der die Dinge für mich noch mehr aufklärte als der AListApart: Ссылка

    
mercurial 12.02.2014 21:56
quelle

Tags und Links