Czy można pominąć najbliższego przodka?

Question

"Pozycja absolutnie położona jest pozycjonowana względem najbliższego przodka." - MDN: position - CSS

Zrozumiałem to, kiedy nie było rodzic, który został zdefiniowany jako position:relative; ale czego nie zdawałem sobie sprawy, że position:absolute technicznie kwalifikowana jako „umieszczonym przodka”.

Oto przykład: http://jsfiddle.net/MSzZG/ Byłoby miło, gdyby tekst „na górze” może mieć właściwość top zastosować do okna zamiast zawierającej div ale ja po prostu nie może dowiedzieć się, czy jest możliwe, aby ominąć.

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

Czy jest jakiś sposób na ominięcie wcześniej elementu pozycjonowanego absolutną (bez korzystając stałe)? Rozwiązanie javascript jest akceptowalne.

Answer 1

Będziesz musiał obliczyć różnicę między swoją naturalną pozycją a żądaną pozycją, aby umieścić ją absolutnie w oknie.

Jeśli korzystasz z jQuery, możesz pozwolić mu wykonać zadanie matematyczne za pomocą funkcji .offset(coordinates).

Answer 2

Jeśli chcesz, aby wewnętrzny div position: absolute był ustawiony względem okna (na które powinieneś podać position: relative), nie zagnieżdżaj go.

position: absolute będzie ZAWSZE pozycjonowany względem swojego NAJBARDZIEJ NATYCHMIASTOWEGO pozycjonowanego elementu nadrzędnego (z position: absolute lub position: relative). Nie można tego obejść - wystarczy lepiej ustrukturyzować HTML lub inaczej wdrożyć CSS.

Więc w zasadzie odpowiedź na swoje pytanie ma :(przynajmniej nie bez użycia pozycjonowanie stałe którego specjalnie nie wspomniano chce zrobić.

Answer 3

Odpowiedź

Nie, nie mogę tego zrobić.

Rozumowanie

Gdybyś był w stanie tego zrobić, a następnie można umieścić jeden div całkowicie z dala od rodziców. To nie tylko uczynić rodzica „samotny”, ale również całkowicie pokonać celów gniazdowania. zagnieżdżenia div tagi lub wszelkie znaczniki do tego nie są robione wyłącznie w celach kosmetycznych; ma to na celu przekazanie użytkownikowi znaczenia słowa: tekstowa.

Czy mogę zaproponować ponowne rozważenie Twojego podejścia? Być może, jeśli wyjaśnisz, co chciałbyś osiągnąć, możemy Ci pomóc. musi na pewno być rozwiązanie.

Możliwe rozwiązania

• Jeśli potrzebujesz wewnętrzna div być umieszczony na górze następnie zgłosić się z jednego poziomu.
• usunąć pozycjonowanie bezwzględne od nadrzędnego.
• Wykorzystanie innej metody pozycjonowania innej niż bezwzględna.