IE7 和 z 索引

发布于 2024-12-09 18:07:33 字数 1031 浏览 1 评论 0原文

我正在建立一个新网站，它将是一个具有不同层次的网站。目前我正在考虑页面的结构以及它们如何相互交互。

例如，我将使用一个人和一扇门。那人走进门。您会看到门的一部分位于人的前面，另一部分位于人的后面。

为了创造这个。我使用 z 索引。因为一切都在移动，所以我想将门元素设置在一个 div 元素中，将人设置在另一个元素中。

这里是一个代码示例

<div id="container">
        <div id="bg"></div>
        <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
        <div id="action" style='width:300px; height:300px; position: absolute; top: 20px; left:20px;'>
            <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 20px; left:20px;' ></div>
            <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 0px; left:0px; z-index:0;'></div>
        </div>
</div>

现在，问题是我前面有一个人（#person）。后面的门（#action）。但有一个元素 (#frontofhouse) 需要位于前面。如果你使用 z-index，一切都会在所有浏览器中正常工作。但在 IE7 中不行。

有谁知道这个问题的解决办法吗？

谢谢

原文

I'm building a new website and it will be a website with different layers.
For the moment i'm thinking out the structure of my page and how they interact to each other.

For example I will use a person and a door. The person walks through the door. You will see that a piece of the door will be at front and an other piece at the back of the person.

To create this. I use z-index. Because everything moves around I want to set the door element in one div element and the person in another.

Here a code example

<div id="container">
        <div id="bg"></div>
        <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
        <div id="action" style='width:300px; height:300px; position: absolute; top: 20px; left:20px;'>
            <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 20px; left:20px;' ></div>
            <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 0px; left:0px; z-index:0;'></div>
        </div>
</div>

Now, the problem is that I have the person (#person) in front. The door (#action) in back. But one element (#frontofhouse) needs to be in the front.
If you play with the z-index everything will work nice in all browsers. But not in IE7.

Does anyone know a fix for this?

Thanks

分享到QQ

分享到微博

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

发布评论

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

握住我的手 2024-12-16 18:07:33

IE7 在 z-index 方面存在问题，请参阅：IE7 Z-Index 问题 - 上下文菜单

但在这种情况下，如果不做很多麻烦，似乎很难修复。

这是在 IE7 和现代浏览器中看起来相同（或足够接近）的版本。

http://jsfiddle.net/thirtydot/ddXEA/

<div id="container" style="position:relative">
    <div id="bg"></div>
    <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
    <div id="action" style='width:300px; height:300px;'>
        <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 30px; left:30px;' ></div>
        <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 10px; left:10px; z-index:0;'></div>
    </div>
</div>

IE7 is buggy with z-index, see: IE7 Z-Index issue - Context Menu

In this case though, it seems to be difficult to fix without a lot of messing around.

Here's a version that looks the same (or close enough) in IE7 and modern browsers.

http://jsfiddle.net/thirtydot/ddXEA/

<div id="container" style="position:relative">
    <div id="bg"></div>
    <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
    <div id="action" style='width:300px; height:300px;'>
        <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 30px; left:30px;' ></div>
        <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 10px; left:10px; z-index:0;'></div>
    </div>
</div>

回复收藏 0 原文

鸢与 2024-12-16 18:07:33

如果你创建一些 jsfiddle 会容易得多。尝试为 #action 元素添加 z-index: 3

回复收藏 0 原文

夏了南城 2024-12-16 18:07:33

我找到了这个解决方案。尝试使用位置：相对。

回复收藏 0 原文

国产ˉ祖宗 2024-12-16 18:07:33

您可以通过删除“action”div 并调整 frontofhouse 的顶部、左侧、actiontwo 来解决该问题。以下是示例：

<div id="container">
        <div id="bg"></div>
        <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 4;'></div>
        <div id="action" style='width:300px; height:300px; position: absolute; top: 20px; left:20px;'>
            <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 5; top: 20px; left:20px;' ></div>
            <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 0px; left:0px; z-index:0;'></div>
        </div>
</div>
<div id="container2" style="position: absolute; top: 350px;">
        <div id="bg2"></div>
        <div id="person2" style='width:200px; height:200px; background:#000; position: absolute; z-index: 4; top: 0px; left: 0px;'></div>
        <div id='frontofhouse2' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 5; top: 40px; left:40px;' ></div>
        <div id="actiontwo2" style='width:300px; height:300px; background:#F00; position: absolute; top: 20px; left: 20px; z-index:0;'></div>
</div>

You can fix that problem by remove 'action' div and adjust top, left of frontofhouse, actiontwo. Following is example:

<div id="container">
        <div id="bg"></div>
        <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 4;'></div>
        <div id="action" style='width:300px; height:300px; position: absolute; top: 20px; left:20px;'>
            <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 5; top: 20px; left:20px;' ></div>
            <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 0px; left:0px; z-index:0;'></div>
        </div>
</div>
<div id="container2" style="position: absolute; top: 350px;">
        <div id="bg2"></div>
        <div id="person2" style='width:200px; height:200px; background:#000; position: absolute; z-index: 4; top: 0px; left: 0px;'></div>
        <div id='frontofhouse2' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 5; top: 40px; left:40px;' ></div>
        <div id="actiontwo2" style='width:300px; height:300px; background:#F00; position: absolute; top: 20px; left: 20px; z-index:0;'></div>
</div>

回复收藏 0 原文

~没有更多了~