Convertir la position absolue en relative

Question

Est-il possible de changer la position DIV de l'absolu au relatif (et de relatif à l'absolu)? DIV devrait rester au même endroit.

Answer 1

vous pouvez modifier cet attribut avec

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

Par exemple:
Vous pouvez utiliser les méthodes de jQuery .position() ou .offset() pour définir « top » et « gauche » attribut css aswell, cette façon, votre objet doit rester à sa position changeant de relative -> absolue.

Je ne pense pas que cela fonctionne vice versa.

Code de démonstration: http://jsbin.com/uvoka

Answer 2

Vous pouvez changer assez facilement de par rapport à absolu en utilisant ses valeurs et offsetLeft offsetTop que les styles gauche et en haut.

L'inverse est plus difficile. Vous devriez essentiellement le changer en relatif et voir où il a fini, puis calculer de nouvelles valeurs de décalage à partir du décalage actuel et l'emplacement désiré.

Notez que lorsque le positionnement est relatif, l'élément fait partie du flux de la page et peut affecter d'autres éléments. Lorsque la position est absolue, l'élément est en dehors du flux de la page et n'affecte pas les autres éléments. Donc, si vous changez de positionnement absolu et relatif, vous devrez peut-être faire des changements à d'autres éléments si vous ne voulez pas qu'ils bougent.

Answer 3

Parce que le formatage dans les commentaires est pas un travail que je publierai ici solution

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

ne fonctionne pas: position de l'élément après le changement de rapport est différent.

Mais quand j'emmagasinés offset et mis à nouveau après avoir changé par rapport, la position est la même:

$(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 a element.absolutize() et qui element.relativize très bien.

Le problème va de par rapport à absolu est que element.offsetTop et offsetLeft

ne donnent que le décalage de votre élément à son parent. Vous devez mesurer la cumualtive offset (c.-à-

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

Si vous voulez vraiment obtenir le haut décalage total d'un élément qui est un enfant d'éléments avec des positions absolues et relatives que vous pourriez utiliser cette fonction

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

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

c'est fondamentalement le code de la solution donnée par la machine ci-dessus.