2009-05-26 3 views
2

UPDATE !!!IE7で入れ子になったDIVを上位(表示 '上')し、次にルートDIVをz-インデックスすることは可能ですか?

推奨回答は間違いです。 #container DIVには "float:left;"があったはずです。 FirefoxとIE7でHTMLを確認してください。あなたは違いを見ることができます!

Iは、zインデックスを使用して階層的に上位のネストされたDIVの上に表示するために、ネストされたDIVを得ることができない...オーバーレイが低く、ネストされたDIVが高いZ-を有していても下のネストされたDIVの上に敷設し続けますindex ...これはIE7でも可能ですか?

次ディスプレイがIE7でFirefoxの緑色#overlay上記青#details、青#detailsは緑色#overlayの下

でアップデート2: 高価:「Zインデックスを追加します:99; #containerスタイルにすると、クラスの.item divが表示されます(FirefoxではIEがうんざりです:とにかく両方が正しく表示されません)。 #containerのZインデックスを設定せずに、それがFirefoxで正しく表示されるではなく、IE ....

<html> 
    <body> 
     <style type="text/css"> 
      .item { 
       float:left;width:75px;height:75px;background-color:red; 
      } 
     </style> 
     <div id="main" style="position:relative;"> 
      <!-- this one should overlay everything, except #details --> 
      <div id="overlay" style="position:absolute; 
            top:0px; 
            left:0px; 
            width:500px; 
            height:500px; 
            z-index:1; 
            background-color:green;"></div> 
      <div id="container" style="position:relative;float:left;"> 
       <!-- these ones should display UNDER the overlay: so NOT visible --> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <!-- this one should display above the overlay --> 
       <div id="details" style="position:absolute; 
             width:200px; 
             height:200px; 
             background-color:blue; 
             left:400px; 
             z-index:99;"></div> 
      </div> 
     </div> 
    </body> 
</html> 

答えて

6

は、私はあなたがIE7でこの作品を持っている#containerのZインデックスを増加しなければならないと考えています。

alt text http://img529.imageshack.us/img529/6416/24042958.jpg

+0

素晴らしいです。 – Ropstah

+0

Priceyが正しいです。 #containerのスタイルに 'z-index:98;が追加され、それが正常に動作することが確認されました。 –

+0

私の例では間違いました。#containerは浮動小数点です(浮動小数点:左)。だからそれは動作しません....... !!!あなたは答えに値するが、誰もが本当の問題の答えを持っている? – Ropstah

1

私はIE7があなたのマークアップを変更することができない限り、あなたがいることをやらせるために起こっていると思ういけません。

#containerは絶対位置が与えられるまで#overlayの背後に座っていません。#containerのz-indexを-1に変更すると、その子#detailsが後になります。

.items z-indexを-1に変更することもできません。

#コンテナの外に#detailsを移動することはできませんか?あなたが最終結果として達成しようとしていることと、あなたが持っているコントロールがあれば、それを正確に見ることなく、代替案を提案することはできませんか?

など。オーバーレイのポイントは何ですか?わずかに透明なdivまたはsolidですか?ユーザーがオーバーレイの背後でそれらを見ることができない場合、.itemsを非表示にしたくないですか?

DOM内の別の場所に#detailsを移動できるようにJqueryなどの任意のjavascriptライブラリにアクセスできますか?

+0

私は若干異なる方法で位置を変更しました。私はオーバーレイをコンテナの内側に移動し、上/左のマイナスの位置に配置しました...今はすべてうまくいきます!ご協力いただきありがとうございます – Ropstah

関連する問題