IE7 Z 索引问题答案

【问题标题】：IE7 Z-Index IssueIE7 Z 索引问题
【发布时间】：2011-04-26 23:03:41
【问题描述】：

在我目前正在处理的网站上，侧边栏中有一个嵌套的无序列表，当此列表中的 <li> 悬停在上方时，它会显示（以前隐藏的）子 <ul>。这在除 IE 7+6 之外的所有浏览器中都可以正常工作。在这些浏览器中，弹出窗口<ul> 显示在上面列表的<li> 下方。知道为什么会这样做吗？

我的 CSS 如下：

div#sidebar-products {
    border-bottom: 3px solid #D31245;
    height: 297px;
}
    div#sidebar-products h2 {
        font-size: 1.5em;
        border-bottom: 0;
        padding: 5px 0 12px 0;
        color: #D31245;
    }
    div#sidebar-products ul{
        z-index: 0;
    }
        div#sidebar-products li{
            position: relative;
        }
            div#sidebar-products ul li a,
            div#sidebar-products ul li a:visited
            {
                display: block;
                border-bottom: 1px solid #eeeeee;
                text-decoration: none;
                padding: 7px 10px 7px 20px;
                color: #6b6869;
                background: #fff url(/img/raquo-red.png) 7px center no-repeat;
            }
            div#sidebar-products li a:hover,
            div#sidebar-products li a:focus,
            div#content-holder div#sidebar-products li.active a
            {
                background-image: url(/img/raquo-white-red.png);
                background-color: #D31245;
                color: #fff;
            }   
        div#sidebar-products ul ul{
            display: none;
            padding-left: 10px;
            position: absolute;
            margin-top: -1px;
            z-index: 9999 !important;
            border: 1px solid #D31245;
            background: #f3f3f3;
            width: 247px;
        }
            div#sidebar-products ul li ul li {
                margin-bottom: 0;
                position: static !important;
                z-index: 500;
            }
                div#site-holder div#content-holder div#sidebar-products ul ul li a {
                    background: #fff url(/img/raquo-red.png) 10px center no-repeat;
                    padding-left: 24px;
                    color: #949494;
                }
                div#site-holder div#content-holder div#sidebar-products ul li ul li a:hover,
                div#site-holder div#content-holder div#sidebar-products ul li ul li a:focus
                {
                color: #D31245;
                background-color: #fff;
            }

【问题讨论】：

标签： css cross-browser internet-explorer-7 internet-explorer-6

【解决方案1】：

我估计您可能遇到过 IE 不在文档级别而是在容器级别处理 z-indexes 的错误。我忘记了通常通过添加/删除位置来修复的确切错误细节：相对于我相信的共享祖先元素。

试试这些以获得更多详细信息：

【讨论】：

【解决方案2】：

我认为你需要确保你的父元素是相对位置的，并且自动溢出

【讨论】：

【解决方案3】：

有一篇关于粉碎杂志的好文章。可能对你有帮助：The Z-Index CSS Property: A Comprehensive Look

【讨论】：