IE7和z-索引

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

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

创建此项。我使用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中。

有没有人知道这个问题的解决办法？

谢谢

来源

2011-10-13 jeroenjoosen

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>

来源

2011-10-13 09:26:58 thirtydot

谢谢。很棒！ – jeroenjoosen

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

来源

2011-10-13 09:10:33 simoncereska

嘿的z-index：3不起作用。这里是jsfiddle.net/3QDb6/1/ – jeroenjoosen

像@kst所说的，位置相对应该有帮助，但是如果你仍然需要将这个定位为绝对的，请尝试设置#container relative和z-index：1 Can不要在真实的IE7上检查它，所以它只是建议 – simoncereska

我发现这个solution。试用位置：相对。

来源

2011-10-13 09:12:32 kst

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

来源

2011-10-13 09:24:14

但是，如果你想移动#action元素。你现在需要移动2个元素，这是我不想做的事 – jeroenjoosen

IE7和z-索引

回答

相关问题