Konwersja pozycji absolutnej na względną

Question

Czy można zmienić pozycję DIV z absolutnej na względną (i względną na bezwzględną)? DIV powinien pozostać w tym samym miejscu.

Answer 1

można zmienić ten atrybut z

$(object).css({position: 'absolute'}); 

Na przykład:
Można użyć metod jQuery za .position() lub .offset() ustawienie „top” i atrybut css „left” aswell, że sposób Twój obiekt powinien pozostać w jego pozycji zmienia się z względnego -> absolutny.

Nie sądzę, że działa na odwrót.

kod demo: http://jsbin.com/uvoka

Answer 2

Można łatwo zmienić go od względem absolutnym używając To wartości offsetLeft i offsetTop jako lewy i gorny stylów.

Odwrotnie jest trudniej. Zasadniczo musisz zmienić go na względny i zobaczyć, gdzie skończył się, a następnie obliczyć nowe wartości przesunięcia z bieżącego przesunięcia i pożądanej lokalizacji.

Należy zauważyć, że gdy pozycjonowanie jest względne, element jest częścią przepływu stron i może wpływać na inne elementy. Gdy pozycja jest bezwzględna, element znajduje się poza przepływem strony i nie wpływa na inne elementy. Jeśli więc zmienisz pozycję bezwzględną i względną, konieczne może być wprowadzenie zmian w innych elementach także wtedy, gdy nie chcesz ich przenosić.

Answer 3

Ponieważ formatowanie w komentarzach nie działają będę publikować rozwiązanie tutaj

$(object).css({position: 'absolute',top: dy, left:dx}); 
// dy, dx - some coordinates 
$(object).css({position: 'relative'}); 

Nie działa: położenie elementu po zmianie względem jest inny.

Ale kiedy przechowywany offset i ustawić go ponownie po zmianie względna pozycja jest taka sama:

$(object).css({position: 'absolute',top: dy, left:dx}); 
var x = $(object).offset().left; 
var y = $(object).offset().top; 
$(object).css({position: 'relative'}); 
$(object).offset({ top: y, left: x }); 

Answer 4

prototype.js ma element.absolutize() i element.relativize który działa bardzo dobrze.

Problem z wyjazdem z względem absolutnym że element.offsetTop i offsetLeft

tylko dać offset elemencie jego rodzica. Musisz zmierzyć cumualtive offsetu (tj

the offset of your element to its parent + 
the offset of the parent to its parent + 
the offset of its parent to its parent + 

itp)

Answer 5

Jeśli naprawdę chcesz, aby uzyskać całkowitą górną przesunięcie elementu, który jest dzieckiem z elementów o pozycjach bezwzględnych i względnych mogłeś użyj tej funkcji

to jest w zasadzie kod dla rozwiązania podanego przez gniotownik powyżej.