firefox 5でのZインデックス問題、クロム

Question

私はIE6と7のためのCSS修正を行っています。大したことはありません。よくそれらを修正しようとすると、私はfirefoxとchromeでより大きなz-index問題を明らかにしました。ヘッダーにリンクがあり、クリックするとプルダウンが表示されます。問題は、ヘッダーのすぐ下のナビゲーション領域の後ろに落ちることです。ここで

は、ドロップダウンやナビゲーションのためのCSSです：

#topNav{ 
    width:100%; 
    height:50px; 
    line-height:50px; 
    z-index:1; 
    position:relative; 
} 

#minicart{ 
    position:relative; 
    width:355px; 
    height:auto; 
    z-index:1000; 
    background-color:#fff; 
    top:0px; 
    right:0px; 
    float:right; 
    -moz-border-radius:3px; 
    border-radius:3px; 
    border:1px solid #000; 
    -moz-box-shadow:0 0 10px 0 #666; 
    -webkit-box-shadow:0 0 10px 0 #666; 
    box-shadow:0 0 10px 0 #666; 
    behavior:url(http://192.168.1.104/magento/skin/frontend/asi/default/assets/PIE.htc); 
    color:#000; 
    z-index:9999; 
} 

だから#minicartのz-indexが#topNavより道高いことがわかります。私が理解できないのは、z-indexがもっと小さいのに#topNavが一番上にある理由です。

提案がありますか？

Answer 1

まず、同じ要素にある2つのうちの1つを削除します。

ハードワークの方法でトラブルシューティングを行います。すべてのコード行を取り除き（コメントアウトして）、と一緒に、background-colorのような視覚化の方法を残してください。

これが機能する場合は、一度に1行追加してテストしてください。

がの場合、ページに何か間違いがあります。

Answer 2

#minicartには新しいスタッキングコンテキストを作成する祖先があります（たとえば、非自動z-インデックスを持つか、CSSトランスフォームが適用されているか、不透明度が1ではありません）、#topNavの下にzオーダーがあります。実際のページを見ずにそれ以上のことを言うのは難しいです。