Question

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

例如，我将使用一个人和一个门。这个人走过门。你会看到一扇门在前面，另一块在后面。

创造这个。我使用z-index。因为一切都在四处移动，我想把门元素设置在一个div元素中，将人设置在另一个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中。

有没有人知道修复此问题？

由于

Answer 1

IE7与z-index有关，请参阅：IE7 Z-Index issue - Context Menu

在这种情况下，似乎很难在没有太多麻烦的情况下修复。

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

Answer 2

如果你创建了一些jsfiddle，那么

会容易得多。尝试为#action元素添加z-index: 3

Answer 3

我发现了solution。尝试使用 位置：相对 。

Answer 4

你可以通过删除'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>

IE7和z-index

4 个答案: