Absolutposition in Relativ konvertieren

Question

Kann die DIV-Position von absolut zu relativ (und von relativ zu absolut) geändert werden? DIV sollte am selben Ort bleiben.

Answer 1

können Sie dieses Attribut ändern mit

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

Zum Beispiel:
Sie Methoden jQuery verwenden könnten .position() oder .offset() „top“ zu setzen und „links“ CSS-Attribut als gut, auf diese Weise soll Ihr Objekt bleiben an seiner Position ändert sich von relativ -> absolut.

Ich glaube nicht, dass das umgekehrt funktioniert.

Demo-Code: offsetleft und offsetTop Werte wie links und oben Stile http://jsbin.com/uvoka

Answer 2

Sie können ganz leicht aus relativ durch es ist mit dem absoluten ändern.

Andersherum ist härter. Sie müssten es im Grunde auf relativ ändern und sehen, wo es gelandet ist, und dann neue Offset-Werte aus dem aktuellen Offset und der gewünschten Position berechnen.

Beachten Sie, dass das Element, wenn die Positionierung relativ ist, Teil des Seitenflusses ist und andere Elemente beeinflussen kann. Wenn die Position absolut ist, befindet sich das Element außerhalb des Seitenflusses und beeinflusst andere Elemente nicht. Wenn Sie also zwischen absoluter und relativer Positionierung wechseln, müssen Sie möglicherweise Änderungen an anderen Elementen vornehmen, auch wenn Sie sie nicht verschieben möchten.

Answer 3

Da in den Kommentaren der Formatierung I-Lösung hier

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

Funktioniert nicht veröffentlichen wird nicht funktionieren: ist Element Position relativ nach dem Wechsel anders.

Aber wenn ich Offset gespeichert und setzen Sie ihn wieder nach der relativen Änderung Position ist das gleiche:

$(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 hat element.absolutize() und element.relativize, die sehr gut funktionieren.

Das Problem von relativ zum absoluten geht, ist, dass element.offsetTop und offsetleft

nur der Offset des Elements zu seinem übergeordneten geben. Sie müssen die cumualtive messen Offset (dh

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

etc.)

Answer 5

Wenn Sie wirklich die gesamte Oberseite eines Elements versetzt zu bekommen, dass ein Kind von Elementen mit absoluten und relativen Positionen könnten Sie Verwenden Sie diese Funktion

function calcTotalOffsetTop(elm) 
{ 
var totalOffsetTop = 0, 
curr   = elm; 

while(curr.parent().is(':not(body)')) 
{ 
    curr   = curr.parent(); 
    totalOffsetTop += curr[0].offsetTop; 
} 
return totalOffsetTop; 
} 

Dies ist im Grunde der Code für die oben genannte Lösung von plodder.