当前位置：文江博客话题详情

在 Internet Explorer 7 中使用 z-Index 定位 div

发布于 2024-08-10 08:08:08 字数 228 浏览 5 评论 0原文

我有两个相对定位的 DIV A 和 DIV； B. a 有一个名为 A' 的 DIV 作为子元素，它是绝对定位的，z 索引为 1000。DIV B' 是 DIV B 的子元素，也是绝对定位的。

Firefox 按预期呈现：A'-B'-BA（从距离用户最近到最远）但是，在 IE7 中我得到： B'-BA'-A

请有人帮我解决方法吗？我已经在这个问题上浪费了好几个小时了！

提前致谢，斯蒂芬

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月寒剑心 2024-08-17 08:08:08

问题在于，在 IE7 及更早版本中，它基本上“重置”相对定位项目内的 z-index。

如果这些工作都没有看到下面的“最后的手段”，

那么在这种情况下，在 IE 中，在 IE7 蹩脚的索引方法中，BAR 将高于 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 拉出到 body 节点并将其移动到需要的位置。我强烈建议使用 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>

The issue is that in IE7 and earlier, it basically "resets" the z-index inside of relative positioned items.

If none of these work see 'The Last Resort' below

so in IE in this case the BAR would be above FOO in IE7's lame indexing method:

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

The workaround is equally lame; You have to make sure the parent of the items you want to be on top are z-indexed higher than the parents of the one you want on the bottom.:

<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 you can swap which one comes first in the HTML causing one to be rendered over the other.

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

NOTE: This is all assuming that you're doing something with FOO and BAR that are causing them to overlap. My example clearly does not overlap so the effect would be hard to see if you copied and pasted it outright.

ADDED:

The Last Resort

To put it simply, this option sucks. But it's the only option if you absolutely must deal with this issue in IE7 and earlier.

Use JavaScript to move your div and position it where it needs to be. The basic idea here is to pull the absolute positioned div out to the body node and move it to where it needs to be. I would HIGHLY recommend using jQuery to do all of this. I made the example code without jQuery, but if you're not using jQuery yet, you should start. It will get this job done in a few lines.

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

回复收藏 0 原文

~没有更多了~