定位用z-index在Internet Explorer 7的div

StackOverflow https://stackoverflow.com/questions/1681122

题

我有两个相对定位的DIV A和B一个具有DIV作为子元素称为A“这是绝对定位，并且具有1000 DIV B的z索引”是DIV B的子元素和定位作为绝对好。

火狐呈现此预期：A'-B'-B-A（从最接近于来自用户farest） 然而，在IE7我得到：B'-B-A'-A

请有人可以帮助我解决方法？我已经浪费了时间这个问题！

在预先感谢 斯蒂芬

有帮助吗？

解决方案

的问题是，在IE7和更早，它基本上是“复位”的z索引相对定位的项目内。

如果没有这些工作见 '不得已' 下面

所以在IE在这种情况下，BAR将高于FOO中IE7的跛脚索引方法：

<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>

OR可以交换哪一个先出现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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top