DIVの位置を絶対から相対(および相対から絶対)に変更することは可能ですか?DIVは同じ場所にとどまる必要があります。
5 に答える
コメントの書式設定が機能しないため、ここで解決策を公開します
$(object).css({position: 'absolute',top: dy, left:dx});
// dy, dx - some coordinates
$(object).css({position: 'relative'});
動作しません:相対に変更した後の要素の位置が異なります。
しかし、オフセットを保存し、相対に変更した後で再度設定すると、位置は同じになります。
$(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 });
その属性は次のように変更できます
$(object).css({position: 'absolute'});
例:
jQueryのメソッドを使用する.position()
か.offset()
、「top」および「left」css属性を設定することもできます。そうすれば、オブジェクトは相対->絶対から変化する位置に留まるはずです。
私はそれがその逆に機能するとは思わない。
デモコード: http: //jsbin.com/uvoka
絶対位置と相対位置を持つ要素の子である要素の合計トップオフセットを本当に取得したい場合は、この関数を使用できます
function calcTotalOffsetTop(elm)
{
var totalOffsetTop = 0,
curr = elm;
while( curr.parent().is(':not(body)') )
{
curr = curr.parent();
totalOffsetTop += curr[0].offsetTop;
}
return totalOffsetTop;
}
これは基本的に、上記のplodderによって与えられたソリューションのコードです。
左と上のスタイルとしてoffsetLeftとoffsetTopの値を使用することで、相対値から絶対値に簡単に変更できます。
逆は難しいです。基本的には相対値に変更して、最終的にどこに到達したかを確認してから、現在のオフセットと目的の場所から新しいオフセット値を計算する必要があります。
配置が相対的である場合、その要素はページフローの一部であり、他の要素に影響を与える可能性があることに注意してください。位置が絶対である場合、その要素はページフローの外側にあり、他の要素には影響しません。したがって、絶対位置と相対位置を変更する場合、他の要素を移動させたくない場合にも、他の要素に変更を加える必要があります。
protocol.jsにはelement.absolutize()とelement.relativizeがあり、これらは非常にうまく機能します。
相対から絶対への移行に関する問題は、element.offsetTopとoffsetLeftです。
要素のオフセットのみをその親に与えます。累積オフセットを測定する必要があります(つまり
the offset of your element to its parent +
the offset of the parent to its parent +
the offset of its parent to its parent +
等。)