Fatal编程技术网
  • internet-explorer-8/
  • Internet explorer 8 IE7/8能否显示位置：位置前面的相对元素：绝对元素？

Internet explorer 8 IE7/8能否显示位置：位置前面的相对元素：绝对元素？

internet-explorer-8 css

Internet explorer 8 IE7/8能否显示位置：位置前面的相对元素：绝对元素？,internet-explorer-8,internet-explorer-7,css,z-index,Internet Explorer 8,Internet Explorer 7,Css,Z Index,我有一个基于绝对定位的布局，在标题区域有一个基于CSS的菜单。Firefox中的一切都很好，但在InternetExplorer7和8中，菜单下拉菜单被内容区域覆盖。在这种情况下，IE根本不尊重z-index属性 我读过关于堆叠上下文和应用程序的内容，但仍然无法使其工作。有没有什么方法可以在不删除位置的情况下修复它：绝对内容？不过，我可以更改用于导航区域的定位方法 以下是简化代码： <!DOCTYPE html> <html> <head> <style

我有一个基于绝对定位的布局，在标题区域有一个基于CSS的菜单。Firefox中的一切都很好，但在InternetExplorer7和8中，菜单下拉菜单被内容区域覆盖。在这种情况下，IE根本不尊重z-index属性

我读过关于堆叠上下文和应用程序的内容，但仍然无法使其工作。有没有什么方法可以在不删除位置的情况下修复它：绝对内容？不过，我可以更改用于导航区域的定位方法

以下是简化代码：

<!DOCTYPE html>
<html>
<head>
<style>
#nav {margin:0; padding: 0; position: absolute; left: 0; top: 0; right: 0; height: 2em; background: #eee}
#nav > li {float: left; list-style: none; position: relative; }
#nav > li > a {display: block; position: relative; margin: 0; background-color: #eee; padding: 5px; border: 1px solid #eee; text-decoration: none; color: #444;}
#nav > li:hover > a { background-color: #ddd; }

#nav li ul { z-index: 1; display: none; position: absolute; padding: 0; margin: 0; list-style: none; border: 1px solid black; background: #eee; width: 100px; }
#nav li:hover ul {display: inline;}
#nav li ul li {list-style: none; margin: 0; padding: 0; height: 5em; }
#nav li ul li a {display: block; padding: 5px; margin: 0; color: #444; text-decoration: none; white-space: nowrap;}

#content { position: absolute; top: 3em; left: 0; right: 0; bottom: 0; background: #ccc; }
</style>
</head>
<body>

<ul id="nav">
    <li><a href="#">A</a><ul><li>...</li></ul></li>
    <li><a href="#">Group B</a><ul><li>...</li></ul></li>
    <li><a href="#">The third group</a><ul><li>...</li></ul></li>
</ul>

<div id="content"></div>

</body>
</html>
好吧，没关系。在nav和content 2和content 1上分别放置一个显式的z索引，这样做了。请注意，不需要上述代码中nav li ul上的z索引