Möglich, den nächsten positionierten Vorfahren zu umgehen?

Question

"Das absolut positionierte Element wird relativ zum nächsten übergeordneten Vorfahren positioniert." - MDN: position - CSS

Ich verstand dies, wenn ein Elternteil war, der als position:relative; definiert wurde, aber was ich war nicht klar war, dass position:absolute technisch qualifizierte sich als „positioniert Vorfahren“. Hier

ist ein Beispiel: http://jsfiddle.net/MSzZG/ Es wäre schön, wenn der Text „Oben“ die top Eigenschaft gilt für die Fenster haben könnte anstelle der umschließenden div aber ich kann einfach nicht herausfinden, ob es möglich ist, zu umgehen.

<div> 
<div>Content 
</div> 
</div> 
<div style="position:absolute;"> 
<div style="position:absolute;top:0px;">At top 
</div> 
</div> 

Gibt es eine Möglichkeit eines zuvor positionierten absolute Element zu umgehen (ohne fixiert verwenden)? Eine Javascript-Lösung ist akzeptabel.

Answer 1

Sie müssen den Unterschied zwischen seiner natürlichen Position und der gewünschten Position berechnen, um es absolut im Fenster zu platzieren.

Wenn Sie jQuery verwenden, können Sie es über die .offset(coordinates)-Funktion für Sie berechnen lassen.

Answer 2

Wenn Sie möchten, dass das innere position: absolute div relativ zum Fenster positioniert wird (das Sie position: relative aktivieren sollten), müssen Sie es nicht verschachteln.

position: absolute werden IMMER relativ zu seinen MOST SOFORT positionierten Eltern positioniert (mit position: absolute oder position: relative). Sie können das nicht umgehen - Sie müssen lediglich Ihr HTML besser strukturieren oder das CSS anders implementieren.

Also im Grunde die Antwort auf Ihre Frage ist nicht :(zumindest nicht ohne feste Positionierung verwendet, die Sie gerade nicht tun erwähnt wollen.

Answer 3

Antwort

Nein, Sie nicht das tun kann.

Reasoning

Wenn Sie können das tun, dann könnten Sie eine von der Mutter vollständig entfernt positionieren div. Dies würde nicht nur die Eltern „einsam“ machen, sondern auch vollständig über die Zwecke der Verschachtelung. Nesting div-Tags besiegen oder irgendwelche Tags für diese Angelegenheit werden nicht nur für kosmetische Zwecke getan; es ist getan, um textuelle Bedeutung für den Benutzer zu vermitteln.

Darf ich vorschlagen, Ihren Ansatz zu überdenken? Vielleicht können wir Ihnen helfen, wenn Sie uns erklären, wie das Endergebnis aussehen soll. es muss sicherlich eine Lösung geben.

Mögliche Lösungen

• Wenn Sie das innere div an der Spitze positioniert werden müssen, dann nehmen Sie eine Ebene aus.
• entfernen Sie die absolute Positionierung vom übergeordneten Element.
• Verwendung einer anderen Positionierungsmethode als absolut.