4

私は2つの相対的に配置されたDIV AとBを持っています.aには絶対配置され、1000のzインデックスを持つA'という子要素としてDIVがあります.DIV B'はDIV Bの子要素であり、絶対的に配置されています。

Firefox はこれを期待どおりにレンダリングします: A'-B'-BA(ユーザーから最も近いものから最も遠いものへ) ただし、IE7 では次のようになります: B'-BA'-A

誰かが回避策を手伝ってくれますか? 私はすでにこの問題で何時間も無駄にしています!

前もってありがとう、ステファン

4

1 に答える 1

11

問題は、IE7 以前では、相対的に配置されたアイテム内の z-index を基本的に「リセット」することです。

これらのいずれも機能しない場合は、以下の「最後の手段」を参照してください

したがって、IE では、この場合、BAR は IE7 の不十分なインデックス作成方法で FOO より上になります。

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

回避策も同様に不十分です。一番上にしたいアイテムの親が、一番下にしたいアイテムの親よりも高い z インデックスになっていることを確認する必要があります。

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

または、HTML で最初に来るものを入れ替えて、一方を他方の上にレンダリングすることができます。

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

注: これはすべて、オーバーラップの原因となっている FOO と BAR を使用して何かを行っていることを前提としています。私の例は明らかに重複していないので、コピーして完全に貼り付けた場合、効果はわかりにくいでしょう。

追加した：

ザ ラスト リゾート

簡単に言えば、このオプションは最低です。ただし、IE7 以前でこの問題に絶対に対処する必要がある場合は、これが唯一のオプションです。

JavaScript を使用して div を移動し、必要な場所に配置します。ここでの基本的な考え方は、絶対配置された div をボディ ノードに引き出して、必要な場所に移動することです。jQuery を使用してこれらすべてを行うことを強くお勧めします。サンプル コードは jQuery を使用せずに作成しましたが、まだ jQuery を使用していない場合は、開始する必要があります。この作業は数行で完了します。

<body>
    <div style="position:relative; z-index:2;"> 
        OUTERFOO 
        <div style="position:absolute; z-index:1000; background:red;">
            FOO
        </div> 
    </div> 
    <div style="position:relative; z-index:1">
        OUTERBAR 
        <div id="bar" style="position:absolute; top:-30px; z-index:1; background:green;">
            BAR
        </div>
    </div>
    <button onclick="moveThisCrapForIE7();">Test</button>
    <script type="text/javascript" language="javascript">
        // Probably best to kick this off when your body is totally loaded.
        // jQuery's $(document).ready is really good for that.
        // for now I'm just using a button to test.
        function moveThisCrapForIE7() {
            // You'll need something more reliable for browser detection here, this will only get IE7 not IE6.
            // I'd recommend jQuery for everything really. It'll save you miles of code.
            if(navigator.appVersion.indexOf('MSIE 7') > -1) {
                // Get your element and move it to where you want it.
                var bar = document.getElementById('bar');
                document.body.appendChild(bar);
                //Then you'll need to monkey with the location 
                // to make sure it's where you want it.
                bar.style.top = '15px';
                bar.style.left = '90px';
                bar.style.zIndex = '3';
            }
        }
    </script>
</body>
于 2009-11-05T15:10:43.300 に答える