今後の質問のために、生成された HTML クライアント コードも同様に投稿することを強くお勧めします。人々が問題をより早く理解し、解決策をより早く見つけるのに役立ちます。
完全なソースまたはクライアント HTML が表示されていない場合、これはすべて憶測です。ただし、あなたの問題はスタック (ing) の順序に関連していると思います。
基本的に、私があなたの設定を想像しているのは（特にRens Tillmannの回答に対するあなたの反応から判断すると）次のとおりです。
HTML:
<div id="header">
...Fixed content showing above modal popup...
</div>
<div id="content">
...Modal background element + Modal popup content...
</div>
この場合、#headerが のそれz-indexより大きい場合( に適切なスタッキング コンテキストがあると仮定)、モーダル コンテンツはのスタッキング コンテキストのサブコンテキストにあるため、固定ヘッダーは常にモーダル コンテンツの上に表示されます。これは、モーダル コンテンツに何を指定しても、常に below になることを意味します。#contentz-index#content#contentz-index#header
この問題を説明するための JSFiddle を次に示します。
では、何ができるでしょうか？現時点で考えられる上記のモーダル コンテンツを取得するための4 つのソリューションがあります。#header
解決策 4 は、Web サイトのデザインで許可されている場合、最も簡単な潜在的な解決策です。
解決策 1:
#contentよりも高いスタック順序を持つようにし#headerます。#header上に浮かぶ必要があると仮定しているので、これは答えではありません#content。
このようにすると、通常のコンテンツがヘッダー コンテンツの上に表示されます。
これが機能しない理由を説明する JSFiddle。
解決策 2:
モーダル#headerと同じスタック コンテキストに入れます。これは機能します。ただし、Web ページが HTML および CSS でどのようにレイアウトされているかによっては、これができない場合があります。
#headerモーダルと同じスタック コンテキストに入れる最も簡単な方法はsibling、モーダルの要素になるように移動することです。
このソリューションを説明する JSFiddle。
このソリューションのもう 1 つの潜在的な欠点は、ヘッダーがコンテンツ内にあると意味が混乱する可能性があることです。
解決策 3:
モーダル背景 + コンテンツを#header要素の同じスタック コンテキストに配置します。ASP.Net コードの設定方法によっては、これができない場合があります。私は AjaxControlToolkit がどのように機能するかを完全には理解していません。したがって、これが可能かどうかはわかりません。
これを行う最も簡単な方法は、ModalPopupとのPanelマークアップを要素に移動することsiblingsです#header。
HTML:
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="header">
...fixed header content...
</div>
<div id="content">
...regular content...
</div>
これを行うと、それらのz-index値は同じコンテキストになり、互いに影響を与える可能性があります。
これを実際に説明するための JSFiddle を次に示します。
注 1:
解決策 3では、モーダルを のスタック コンテキストよりも高いスタック コンテキストに配置することもできますが、#headerそれでも機能します。
たとえば、これも機能します（モーダルが要素よりも高いと仮定しz-indexます#wrapper）：
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="wrapper">
<div id="header">
...fixed header content...
</div>
<div id="content">
...regular content...
</div>
</div>
注 2:
同じスタッキング コンテキストにいるために、兄弟要素である必要はありません。ただし、兄弟のスタッキング コンテキストが必要です。
例えば：
<div class="has-stacking-context" style="z-index: 2;">
(stacking context sibling 1)
...content will show in middle...
</div>
<div class="no-stacking-context">
<div class="no-stacking-context">
<div class="has-stacking-context" style="z-index: 3;">
(stacking context sibling 2)
...content will show above everything...
</div>
</div>
</div>
<div class="has-stacking-context" style="z-index: 1;">
(stacking context sibling 3)
<div class="no-stacking-context">
<div class="has-stacking-context" style="z-index: 100000;">
(subcontext of sibling 3's stacking context)
...content will show below everything...
</div>
</div>
</div>
要素を物理的に移動する (ソリューション 2 と 3 で行ったように) と、さまざまなスタック コンテキストを削除して 2 つのスタック コンテキストを兄弟にする必要がなくなります。一部の要素のスタック コンテキストを削除できない場合があります。
解決策 4 (これは簡単ですか?):
これは基本的にソリューション 3 を実行する別の方法です。モーダル要素を物理的に移動してスタッキング コンテキストを一致させる代わりに、モーダル要素スタッキング コンテキストをブロックしているスタッキング コンテキストを排除し、#header兄弟関係をなくします。
CSS の設定方法によっては、これが機能する場合と機能しない場合があります。
たとえば、#content要素のスタッキング コンテキストを削除して、スタッキング コンテキストの兄弟にすることができる場合があります。
これは、最も簡単な潜在的な解決策を示す JSFiddle です。
z-index要素のプロパティ (およびpositionプロパティ)を削除したことに注意してください#content。現在、スタック コンテキストはありません。モーダル要素のすべての祖先要素に対してこれを実行して、機能するかどうかを確認できます。ただし、これらの先祖の一部は実際にスタック コンテキストを必要とする場合があることに注意してください...
最終的な解決策 (あなたとチャットした後):
だから、あなたのコードを見た後。基本的に、ソリューション 4 を使用して問題を解決しました。構造は次のようになります。
<div class="HeaderContainer">
</div>
<div id="contentAreaMasterPage">
<div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_foregroundElement" style="position: fixed; z-index: 100001; left: 38.5px; top: 10px;">...</div>
<div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_backgroundElement" class="modalBackground" style="position: fixed; left: 0px; top: 0px; z-index: 10000; width: 1003px; height: 601px;"></div>
</div>
.HeaderContainerhas と of があるためz-index、内部のすべてが常に下に表示されます。したがって、2 つのモーダル要素がofの の100 倍を超える値を持っていても、それらは of の内部にあるため、常にその下に表示されます。10#contentAreaMasterPagez-index9#contentAreaMasterPage.HeaderContainer1z-index.HeaderContainerz-index10#contentAreaMasterPagez-index9
したがって、 とモーダル要素の値の間を取得するため#contentAreaMasterPageのz-indexスタック コンテキストを持たないように、を削除したいと考えています。この場合、を削除しても安全です。なぜなら、 を必要とせずに上に表示されるからです。.HeaderContainerz-indexz-index.HeaderContainer#contentAreaMasterPage#contentAreaMasterPagez-index
したがって、関連するソリューションの CSS コードは次のようになります。
#contentAreaMasterPage {
z-index: auto !important;
}
マスターテンプレートもマスターCSSファイルも変更できないため、特定のページ内に入ります。