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.Convertir la position absolue en relative
Répondre
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
$ (objet) .css ({position: 'absolute', en haut: dy, left: dx}); clone.css ({position: 'relative'}); ne fonctionne pas - position de l'élément après le changement de parenté, la position est différente mais quand j'ai stocké offset et le définir à nouveau après le passage à relatif, la position est la même $ (objet) .css ({position: 'absolute', top : dy, à gauche: dx}); var x = clone.offset(). À gauche; var y = clone.offset(). Top; clone.css ({position: 'relative'}); offset ({top: y, gauche: x}); – John
exemple rapide de possibilitys: http://jsbin.com/uvoka Cordialement, --Andy – jAndy
La suggéré "solution" n'est pas quoi que ce soit !!! conversion –
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.
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 });
Merci d'avoir partagé cela. m'a vraiment aidé. –
ce code passe-t-il de l'absolu au relatif ?? – Varun
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.)
Je me suis toujours demandé ce que cette méthode fait réellement? Cela va-t-il permettre à un élément enfant non 'body' de conserver sa position, tout en l'ajoutant au corps du document? Ou est-ce simplement «absolutiser» un élément par rapport à son parent? Si c'est le dernier, alors je vais utiliser la solution, au-dessus de la vôtre. Merci –
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.
Ceci est parfait pour les éléments à l'intérieur d'un parent non corps, ce qui est exactement ce dont j'ai besoin. Merci. En fait, j'utilise le framework prototype.js, donc je me demandais si 'absolutize()' fait la même chose, comme mentionné ci-dessous, mais j'ai le sentiment qu'il ne fait qu'un élément 'absolu', par rapport à son parent et non Donc, je vais utiliser votre solution ... –
- 1. position: relative apparaissant sur la position: absolue
- 2. CSS: Aide sur la position relative/absolue
- 3. Position absolue et flottante
- 4. Meilleure technique pour centrer un élément en utilisant la position relative/absolue?
- 5. en utilisant jQuery pour obtenir la position absolue ou relative d'un div
- 6. Position: absolue à l'intérieur position: relative ne montrant pas dans IE
- 7. CSS: Position: Position intérieure absolue: relative, mais sans incidence sur le parent?
- 8. Position: absolue; ne fonctionne pas
- 9. URL absolue de la base + URL relative en C#
- 10. Position absolue vs float en XHTML/CSS
- 11. CSS Position absolue
- 12. find element à une position absolue
- 13. jQuery Sélectionner et faire glisser les éléments avec la position relative et absolue
- 14. CSS: Position absolue et index Z
- 15. URL relative et différence d'URL absolue
- 16. iPhone UITextView position relative
- 17. Définir la position des images en mise en page absolue
- 18. Problème avec CSS, en position: absolue
- 19. Obtenir la uri relative de la uri absolue
- 20. Convertir une URL relative en une URL absolue avec DOM HTML simple?
- 21. Réglage de la position absolue dans prerender()
- 22. La position absolue ne fonctionne pas
- 23. Débordement CSS caché avec la position absolue
- 24. Comment changer l'URL relative en URL absolue dans wget
- 25. html div position absolue héritée?
- 26. Position CSS: Absolue avec ajustement relatif
- 27. Espacement IE7/IE8 avec la position: absolue?
- 28. Modifier une URL relative en URL absolue dans l'objectif C
- 29. Obtenir la position relative avec extjs
- 30. Quelle est la position: relative utile pour?
Demandez-vous "Restera-t-il au même endroit?". Si oui, oui, mais en tant que relatif, il sera dans le flux de documents, absolu, il ne sera pas. – Zoidberg
J'ai des éléments absolument positionnés qui devraient être convertis en relatif.Le problème est que je ne peux pas calculer la bonne position relative (haut, gauche), donc les éléments seront conservés à leur place. – John