div {position：absolute}異なる幅の画面上の異なる位置にレンダリングする

Question

jQuery animate()を使用してスライド（S）ウィンドウを作成しました。すなわち、それは左右にスライドする。

$.animate({width:'toggle', opacity:'toggle'},2000,'swing',function(){ 
    // ... 
}) 

オープン時に次のCSSが使用されます。

position:absolute; 
height: 496px; 
width: 694px; 
left:36px; 
top:124px; 

私が直面している問題は、異なる幅の画面では、ウィンドウが別の場所から始まることです。私はそれを別のウィンドウ（A）に隣接して表示することになっています。私のラップトップでは正常に動作します。クライアント側では、ウィンドウAの半分が重複しています。私はそれがposition:absolute;に起因すると信じていますが、解決方法はわかりません。助けてください！ありがとう！

Answer 1

回答ありがとうございました！とても有難い。動作するウィンドウS.のためのpostion:absolute;で

var pos = jQuery("#div_a").offset(); // Window A's position 
var x = pos.left + jQuery("#div_a").width(); // Window S's position 

設定left:x;：アリ・youhannaeiの回答@

は私に次のコードを使用するためのアイデアを与えました。

Answer 2

異なるサイズの画面では解像度が異なります。したがって、コンピュータの100ピクセルは画面の中心になる可能性がありますが、他の誰かにはそうではない可能性があります。 pxの代わりに％を使用すると、よりうまくいくかもしれません。

Answer 3

あなただけの側面に沿ってあなたの窓を、そのオブジェクトをfloatに

float:right; 

をしようとします。 ディビジョンタグの配置を教えてもらうにはここでコード全体を投稿する必要があります。 そうでなければあなたがあなたのコードの中で、あなたのスライドの高さを持って、表示するページのクライアントウィンドウの高さと位置を取得するために$("body").height();とも$("body").scrollTop()を使用することができますW3Schools

Answer 4

でフロートプロパティを検索することができます。あなたのスライドの高さを減らしてください。ページの中央にスライドを表示できるようになりました。

var top = $("body").scrollTop() + ((parseInt($("body").height()) - slideHeight)/2); 

Answer 5

アニメーションまたはposition：absoluteプロパティが適用されるこのdivに親divがある場合は、position：relativeを適用します。

<div class="wrapper"> 
    <div class="slider"></div> 
</div> 

css: 
.wrapper{ position:relative;} 
.slider{ 
position:absolute; 
height: 496px; 
width: 694px; 
left:36px; 
top:124px; 
}