0

jqueryを使用してDOMにアイテムを追加しようとしています。他のすべてのコンテンツのtop（z-index）にオーバーレイする必要があり（すでに数百のz-indexが設定されています）、常に中央揃えにする必要があります。

このdivをDOMに追加するときに、その'left'プロパティを$（window）.width（）/2-971/2に設定します。971は、追加しようとしているdivの幅です。これはそのためのCSSです

width: 971px;
height: 669px;
background-image: url(/path/to/image/);
position: absolute;
margin: 0px auto;
z-index: 2500;

問題は、ブラウザのサイズが変更された後、divが中央に留まらないことです。私は左で試しました：50％とピクセル単位の負の左マージン。'screen'に関連して'left'プロパティを設定すると、ブラウザウィンドウがユーザーによって最大化された場合にのみ中央に配置されます。

この絶対位置にあるdivを、常に中央に配置されるように高いz-indexで配置するための良い方法は何ですか？

4

2 に答える 2

2

まず、margin: 0px auto;divを水平方向に中央に配置するのに十分です。したがって、leftプロパティを削除するだけで問題を解決できる場合があります。

そうでない場合は、jQueryを使用しているため、外観を再度修正するために制御できる.resize()イベントがあります。window

例えば

function resizeMyBox() {
  //code to resize
}       
$(function() {
   resizeMyBox();  // Resize on DOM ready
});
$(window).resize(function() {
   resizeMyBox(); //Resize again on every resize
});
于 2012-04-17T12:02:39.683 に答える
0 
#someId{
    width: 971px;
    height: 669px;
    padding: 0;
    border: 0;

    margin-left:-486px; /* 971/2 */
    margin-top:-335px; /* 669/2 */

    position: fixed;
    left: 50%;
    top: 50%;

    background-image: url(/path/to/image/);
    z-index: 2500;
}

これを試してみたとあなたが言ったことは知っていますが、これは標準準拠モードで実行されているブラウザーで常に機能していました (つまり、境界線やパディングを考慮していないためにスローされた可能性があります)。これが実際の例です: http://jsfiddle.net/U3RrT/

position別のプロパティで要素をその上に設定したことが原因である可能性があることに気付きました。試してみてくださいposition:fixed;。

于 2012-04-17T12:13:07.557 に答える