javascript - Möjligt att kringgå den närmaste positionerade förfadern?


"Det absolut positionerade elementet är positionerat i förhållande till närmaste positionerade förfader." -MDN: position - CSS

Jag förstod detta när det fanns en förälder som var definierad som position:relative; men det jag inte insåg var att position:absolute tekniskt sett kvalificerade som en "positionerad anfader".

Här är ett exempel: http://jsfiddle.net/MSzZG/ Det skulle vara trevligt om texten "At top" kunde ha top-egenskapen tillämpad på fönstret istället för den omgivande div, men jag kan helt enkelt inte lista ut om det är möjligt att kringgå.

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

Finns det något sätt att kringgå ett tidigare placerat absolut element (utan att använda fixed)? En JavaScript-lösning är accepterad.

Svar #1

Du måste räkna ut skillnaden mellan dess naturliga position och den önskade positionen för att placera den absolut i fönstret.

Om du använder jQuery kan du låta det göra matematiken åt dig via funktionen .offset(coordinates).

Svar #2

Svar

Nej. Du kan inte göra det.

Resonemang

Om du VAR i stånd att göra det skulle du kunna placera en div helt bort från föräldern. Detta skulle inte bara göra föräldern "ensam" utan också helt motverka syftet med nästling. Att nästla div-taggar eller några andra taggar är inte bara gjort för kosmetiska syften; det görs för att förmedla textuell mening till användaren.

Får jag föreslå att du omprövar ditt tillvägagångssätt? Kanske om du förklarar vad du vill att slutresultatet ska bli, kan vi hjälpa dig. Det måste säkert finnas en lösning.

Möjliga lösningar

  • Om du behöver att den inre div:en ska vara placerad högst upp, ta ut den en nivå.
  • ta bort absolut positionering från föräldern.
  • Använder en annan metod för positionering än absolut.