IE7和z-索引

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>