Html IE7和z指数

我正在建立一个新的网站，它将是一个不同层次的网站。 目前，我正在考虑我的页面结构以及它们之间的交互方式

例如，我将使用一个人和一扇门。那个人穿过门。你会看到门的一部分在人的前面，另一部分在人的后面

来创建这个。我使用z索引。因为一切都在移动，所以我想在一个div元素中设置door元素，在另一个div元素中设置person

下面是一个代码示例

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

现在，问题是我前面有一个人。门（动作）在后面。但有一个元素（#房子的前面）需要在前面。 如果使用z-index，所有浏览器中的一切都会运行良好。但不是在IE7中

有人知道这个问题的解决方法吗

---

谢谢

如果您创建了一些jsfiddle，那就容易多了。尝试为#action元素添加

z-index:3

我发现了这个。尝试使用position:relative

您可以通过移除“action”div并调整顶部、房屋正面左侧和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>

---

IE7带有

z-index

，请参阅：

不过，在这种情况下，如果没有大量的混乱，似乎很难修复

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

---

正如@kst所说，相对位置应该会有所帮助，但如果您仍然需要将其定位为绝对位置，请尝试设置#容器相对位置和z-index:1在真正的IE7上无法检查它，因此这只是建议，但如果您想移动#action元素。你现在需要移动2个元素，这是我不想做的

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