2

ポップアップを表示するために、ページ全体にdivをオーバーレイしようとしています。問題は、ページ全体にオーバーレイされないことです。コードの概算は次のとおりです。

<div style="z-index:902;">
    <div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
        Overlay
    </div>
    Contents of container 1
</div>
<div style="z-index:902;">
    Contents of container 2
</div>
<div style="z-index:902;">
    Contents of container 3
</div>

オーバーレイdivはコンテナ1の上に表示されますが、コンテナ2と3のコンテンツはオーバーレイの上に表示されます。

CMS（DotNetNukeが役立つ場合）を使用しているため、オーバーレイdivをコンテナー1の外に移動できません。

オーバーレイのz-indexをコンテナーよりも高く設定しようとしましたが、何も機能していません。

誰か助けてもらえますか？

4

6 に答える 6

7

実用的なフィドルの例！

この問題の範囲を提示したコードに限定すると、問題なく機能します。position:fixed divたとえば、フィドルでは、ソリューションが機能していることを示すために、に背景色を配置したことがわかります。

ただし、を使用している場合は、要素にいくつかが適用されてz-indexいると想定しても問題ありません。z-indexposition

これを考慮して、この部分：

<div style="z-index:902;">
    <div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;">
        Overlay
    </div>
    Contents of container 1
</div>

position:fixedの内側のdivは、側面に他のスタック要素（兄弟）があるスタック要素の内側にあり、。と同じスタック位置にあるため、「ページ全体」オーバーレイとして機能することはできませんz-index:902;。

説明するためにこのフィドルを参照してください！

兄弟要素をより低いスタック位置に移動すると、それを機能させることができます。このフィドルの例を参照してください！

編集済み

私の答えのこの最初の部分は、私の頭が痛い（コメントを参照）のアドバイスに従って編集され、OPが質問を推測に任せたため、最初のフィドルが機能することをよりよく説明しました！この回答で提示および承認された2つのソリューションに変更は加えられていません。

解決策

オーバーレイを他のすべてのdivの外側に配置しますが、これは目標によって異なります。

<div style="z-index:902;">
    Contents of container 1
</div>
<div style="z-index:902;">
    Contents of container 2
</div>
<div style="z-index:902;">
    Contents of container 3
</div>
<div style="position:fixed; z-index:10000; left:0; top:0; right:0; bottom:0; background:#ccc;">
    Overlay
</div>

このフィドルの例を参照してください！

編集済み

このコメントのために：

はい、これは理想的な答えであり、書かれたとおりに私の質問に答えるので受け入れますが、私が直面した問題は、作成を制御できなかった他のコンテナーのz-indexを動的に変更するJavaScriptからのものでしたそれらすべての上に私のdivを配置することは不可能です。

中に好きなものを配置できるcontainer 1と仮定し、jQueryを使用している、または使用できると仮定すると、問題を解決するためにこれを行うことができます。

<div style="z-index:902;">
  <div class="placeOutside" style="position:fixed; z-index:903; right:0; bottom:0; left:0; top:0; background:#ccc;">
        Overlay
  </div>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.placeOutside').appendTo('body');
    });
  </script>
  Contents of container 1
</div>
<div style="z-index:902;">
  Contents of container 2
</div>
<div style="z-index:902;">
  Contents of container 3
</div>

この動作するフィドルの例を参照してください！

于 2012-05-15T12:43:46.880 に答える
5

z-index配置された要素（、、、position:absolute;などposition:relative;）でのみ機能しposition:fixed;ます。

そのプロパティの値が。以外の場合、要素は配置されていると言われます。positionstatic

〜CSS2.1仕様のビジュアルフォーマットモデル

于 2012-05-15T12:43:55.633 に答える
0

オーバーレイの幅と高さを100％に設定しました。これは、コンテナー1の直系の子孫であるため、その幅はコンテナー1の幅と高さの100％と計算され、問題を説明します。

解決策としては、オーバーレイを表示する前に、オーバーレイの幅と高さをJavaScriptのブラウザウィンドウのサイズの絶対ピクセル値に設定する必要があります。

于 2012-05-15T12:44:46.947 に答える
0

このコードはFirefoxで私のために働いた：

<div style="z-index:1;">
    <div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index:901;">
        Overlay
    </div>
    Contents of container 1
</div>
<div style="z-index:1;">
    Contents of container 2
</div>
<div style="z-index:1;">
    Contents of container 3
</div>

それで、それを試してみて、それがあなたのために働くかどうか確かめてください。

于 2012-05-15T12:52:10.037 に答える
0

これが私の解決策です...2人の兄弟のdivを想像してみてください。＃in-frontは#behindの上に置く必要があります。

<div id="behind"></div>
<div id="in-front"></div>

それらを兄弟にする代わりに、最初のdivをラッパー内にラップし、その位置を固定に設定します。

<div id="wrapper" style="position:fixed; width:100%; top:0; left:0;">
    <div id="behind"></div>
</div>
<div id="in-front"></div>

#behind divは、必要に応じて自分自身を配置または中央揃えできるようになりました。例については、このjsfiddleを見てください。それらが負のマージンなしでどのように連携するかに注目してください！

于 2013-01-23T07:20:04.537 に答える
0

位置の相対幅と絶対幅のz-indexを混在させる場合、これは意味がありません。

<div style=" Position: fixed ;  z-index:902; width:100%; heigth:100%;background:#F00;">
    Contents of container 2
</div>
<div style="z-index:1; position:relative">
    <div style=" z-index:903; Position: fixed ; left: 0; top: 0;background:#ccc;">
        Overlay
    </div>
</div>

http://jsfiddle.net/vLp0am43/

于 2018-09-12T17:54:13.890 に答える