誰かが私のページをのぞき見して、ドロップダウンをスライドショーの上に表示する方法についてアドバイスしてくれることを願っています。「品質」にカーソルを合わせてメニューを表示すると、png の後ろに表示されます。これは IE で表示されますが、Chrome/FF ではうまく機能します。
http://molded.jasonscms.com/Home.aspx
ヒントをありがとう!
親 div に子 div よりも高い z-index を与え、親 div の position:absolute と子 div の position:absolute を作成します。
そのようです:
<div style="position: relative; z-index: 2">
<div style="position:absolute;z-index: 1;">
</div>
</div>
ちなみにこのバグはIE9+には存在しません
重要な部分は、メニューの親 ( <header>
) に、スライドショーの親である兄弟コンテナー (バナー要素) よりも高い z-index を持たせることです。全体の問題は、IE が絶対位置要素の z-index をどのように処理するかに関係しており、明示的に設定されていない限り、ページの上部から下に向かって増加します。
このようにメニューの内部要素を操作する必要はありません。メイン コンテナが処理します。
これは、私のブラウザが互換モードになっていることが原因でした。それを削除したところ、うまく表示されました。
これを少しハックしてみてください:
#div{
background:#fff; //desired background color. You can also try transparent.
opacity:0;
}
はい、これは互換モードの問題ですが、互換モードで実行していることを知っているかどうかにかかわらず、一部の人々に注意する必要があります。そのため、引き続き問題を修正する必要があります。
次のスタイルのメニューの親 DIV を指定します。
#parentDiv{position:relative; z-index:999;}
トリックを行う必要がありますが、z-index は、親 div の子 div の他の z-index よりも大きくする必要があります。