1

<div style="position:relative;"> OUTERFOO <div style="position:absolute; z-index:1000;">FOO</div></div> <div style="position:relative;">OUTERBAR <div style="position:absolute;">BAR</div> </div>

OUTERFOOがOUTERBARにスタックすることなく、FOOがBARにスタックするようにしたいです。

これはFirefoxで機能しますが、IE7では機能しません。誰かが回避策を投稿できますか？

よろしくお願いします、ステファン

4

3 に答える 3

2

W3Cが実装を作成せずに標準を定義するという事実は、どのブラウザーが「正しいか間違っているか」に関係なく、異なる解釈につながるものです。

すべてのブラウザで必要なことを実行する適切な方法は、次のようなものです。

<div style="position:relative; z-index:1;"> OUTERFOO 
  <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
  </div>
  <div style="position:absolute; z-index:2;">FOO</div>
</div>

また

<div style="position:relative; z-index:1;"> OUTERFOO 
  <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
    <div style="position:absolute; z-index:2;">FOO</div>
  </div>
</div>

ばかげた数のziindexesの必要はありません-それは混乱につながります。

基本的に、z-indexを使用する場合は、わかりやすくするために、すべての兄弟要素と親要素を配置し、すべての兄弟をz-indexする必要があります。これははるかに多くの頭痛の種になります。

質問でこれを行おうとした方法は、これと同じ方法で階層化の基本的なルールに違反します。たとえば、次のようになります。

<div><span></div></span>

cssを使用してhtml構文のネストルールを破るソリューションを探しています。私が提供する例は、それらのルールに従いながら、あなたが本当に望んでいることを達成します。

于 2009-11-05T16:10:59.957 に答える
1

8より前のバージョンのIEには、既知のz-indexバグがあり、配置された要素が新しいスタッキングコンテキストを生成し、z-indexが正しく機能しなくなります。この例は、問題を示しています。

あなたのページはIE8で正しく表示されますか？

于 2009-11-05T16:01:19.117 に答える
0

あなたが何を望んでいるかについて私がはっきりしているのかどうかはわかりませんが、コードを取得し、Firefox 3でどのようにレンダリングするかは、次のようにdivを再配置することでIE7に複製できます

<div style="position:relative; z-index:2;">OUTERFOO</div>
<div style="position:absolute; z-index:1">
   <div style="position:absolute; z-index:1000;">FOO</div>
      OUTERBAR
      <div style="position: relative; z-index: 1;">BAR</div>
   </div>
</div>
于 2009-11-05T16:08:07.763 に答える