我正在建立一个新网站,它将是一个具有不同层次的网站。 目前我正在考虑我的页面结构以及它们如何相互交互。
例如,我将使用一个人和一扇门。那个人走进门。你会看到门的一部分在人的前面,另一部分在人的后面。
创建这个。我使用 z-index。因为一切都在移动,所以我想在一个 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 中不是。
有人知道解决这个问题的办法吗?
谢谢
最佳答案
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>
关于html - IE7 和 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7751756/