Absolute Positionierung innerhalb der absoluten Position

88

Ich habe 3 divElemente.

1. divist größer (Wrap) und hatposition:relative;

Die 2. divPosition ist absolut zur 1. divrelativen Positionierung positioniert (und in der 1. Position enthalten div).

3. divist im 2. enthalten divund hat auch absolute Positionierung.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Warum ist die 3. divPosition absolut zur 2. Position div(die auch die absolute Position zur 1. Position ist div) und nicht zur 1. divPosition, die eine relative Position hat?

Denn die 3. divPosition ist die absolute Positionierung zur absolut positionierten 2 div..

Pufos
quelle
Das ist wirklich etwas, wonach ich suche, und diese Antworten auf Ihre Fragen haben meine Augen geöffnet: \.
Benjamin
absolut: Das Element ist relativ zu seinem ersten positionierten (nicht statischen) Vorfahrenelement positioniert
Oswaldo Zapata

Antworten:

94

Weil position: absolutedie relative Position für Kinder genauso zurückgesetzt position: relativewird.

Daran führt kein Weg vorbei - wenn Sie möchten, dass der dritte divabsolut relativ zum ersten positioniert ist, müssen Sie ihn zum Kind des ersten machen.

Pekka
quelle
Im Grunde genommen wird die absolute Position zur relativen Position für das absolut positionierte Kind?
Pufos
@ Pufos Art von. Die 0px / 0pxPosition für Kinder wird vomposition: absolute
Pekka
24
@pufos Ich denke du verwirrst das ein wenig. position:relativebedeutet, dass das Element relativ zu seiner aktuellen Position positioniert wird (oben, rechts, unten links). position: absolutebedeutet, dass es relativ zum Browserfenster oder zum ersten übergeordneten Element mit position: absoluteoder positioniert wird position: relative.
Seler
Können Sie einen Verweis darauf online teilen? Weil ich keine finden konnte ... Und ... Vielen Dank
Pufos
2
@pufos die grundlegende Referenz ist hier: w3.org/TR/CSS2/visuren.html#choose-position
Pekka
27

Beide position:relativeund position:absoluteetablieren enthaltende Elemente als Positionierungs-Ascestoren.

Wenn Sie möchten, dass Div 3 basierend auf Div 1 positioniert wird, machen Sie es zu einem direkten Kind von Div 1.

Beachten Sie, dass position: relativedas Element relativ zu seiner natürlichen Position positioniert ist und position: absolutedass das Element relativ zu seinem ersten position:relativeoder position:absoluteVorfahren positioniert ist .

Mike Tunnicliffe
quelle
Ich wollte, dass die 3. Div absolut positioniert ist, aber ich wusste nicht, ob dies Standard ist (Crossbrowser). Und ich konnte keine Spezifikationen online finden ... Vielen Dank
Pufos
Absolute Positionierung in diesem Abschnitt: w3.org/TR/CSS21/visuren.html#comp-abspos
Mike Tunnicliffe
@ MikeTunnicliffe absolutes Mittel Element ist relativ zu seiner ersten Position positioniert: auch fest
Tr fixedn Kim Dự
15

Position statisch: Die statische Position ist die Standardmethode, mit der ein Element im normalen Ablauf Ihrer HTML-Datei angezeigt wird, wenn überhaupt keine Position angegeben ist.

Wichtig: top, right, bottomund lefthaben Eigenschaften , keine Auswirkung auf Statisch ELEMENT AUFGE.

Position relativ: Wenn Sie ein Element mit dem relativen Wert positionieren, bleibt das Element (und der Platz, den es einnimmt) im normalen Fluss Ihrer HTML-Datei.

Anschließend können Sie das Element um einen gewissen Betrag bewegen , um die Eigenschaften mit left, right, topund bottom. Dies kann jedoch dazu führen, dass das Element andere Elemente auf der Seite überlappt. Dies kann der gewünschte Effekt sein oder auch nicht.

Ein relativ positioniertes Element kann sich von seiner Stelle bewegen, aber der Platz, den es einnimmt, bleibt erhalten.

Position absolut: Durch Anwenden des absoluten Positionswerts auf ein Element wird es aus dem normalen Fluss entfernt. Wenn Sie das absolut positionierte Element verschieben, ist sein Referenzpunkt der obere / linke Rand des nächstgelegenen enthaltenen Elements, dessen Position nicht statisch deklariert ist - auch als nächstgelegener Positionierungskontext bezeichnet. Wenn also kein enthaltendes Element mit einer anderen Position als statisch vorhanden ist, wird es von der oberen linken Ecke des Körperelements aus positioniert.

In Ihrem Fall ist der nächstgelegene Behälter des 3. der 2 ..

Gaurav
quelle
4

Noch eine klarstellende Antwort.

Ihr aktuelles Szenario lautet wie folgt:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

Und du kämpfst irgendwie damit.

Wenn Sie den HTML-Code ändern können, gehen Sie einfach wie folgt vor:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */
valk
quelle
2
Mein-Wrapper sollte wahrscheinlich .my-Wrapper sein
jdavid.net
Dieser Ansatz ist erstaunlich, ich habe immer noch keine Ahnung, warum er mein Problem gelöst hat. Mein Problem ist, dass ich mein drittes Element aus einem anderen Grund nicht als Kind des ersten Elements haben kann.
Windmaomao
2

Der Grund, warum das 3. divElement absolut zum 2. divElement positioniert ist, liegt darin, dass, wie in der CSS-Spezifikation hier erläutert , das "übergeordnete" Element (besser gesagt: Block enthalten) eines absolut positionierten Elements nicht unbedingt sein unmittelbares übergeordnetes Element ist, sondern vielmehr sein unmittelbar positioniertes Element, dh jedes Element, dessen Position auf etwas anderes als staticzum Beispiel eingestellt istposition: relative/absolute/fixed/sticky;

Wenn Sie also möchten, dass das 3. divElement in Bezug auf das 1. Element absolut in Bezug auf das 1. Element positioniert ist div, sollten Sie Ihr 2. divElement als position: static;Standardwert position: ...festlegen (oder einfach eine Deklaration im Regelsatz Ihres 2. divElements entfernen ). .

Das Obige macht den 1. divzum enthaltenden Block des 3. absolut positioniert div, wobei der 2. divfür diesen Positionierungszweck ignoriert wird .

Ich hoffe es hilft.

atzom
quelle
0

Für den Fall, dass noch jemand nach einer Antwort darauf sucht.

Ich konnte dieses Ergebnis erzielen, indem ich clear: both;dem ersten absolut positionierten Div einen Stil hinzufügte , der das Kind zurücksetzte und ihm erlaubte, seine eigene absolutePositionierung zu verwenden.

Gast1234
quelle