0

问题 我已经尝试了很多方法来让position: relative / absolute / fixedIE7 正常工作。我现在无法解决这个问题。

.levelTwo是具有的元素pos: ab并且.levelOne是具有的元素pos: rel。

因此，期望的结果将是任何 .levelTwo 元素高于/在任何其他元素之前。目前他们坐在后面.levelOne a

标记

    <!-- Bof Level One-->
    <ul class="levelOne">
        <li><a href="#">Basic IT Access <span>&#9658;</span></a>
            <div class="levelTwo">
                jamie
            </div>
        </li>
    </ul>

CSS

.levelOne {
    border-top: 1px solid #DDD;
    list-style: none;
    position: relative;
}

.levelTwo {
    left: 157px;
    position: absolute;
    top: 0;
    background: #FFF;
    height: 40px;
    width: 170px;
    z-index: 10;
    /*tried*/
    display: inline-block;
    *zoom:1;
    overflow:hidden
}

期望的

期望的

破碎的

破碎的

这是我的小提琴：http: //jsfiddle.net/hutber/2GvA4/

4

1 回答 1

3

试试下面的css规则，你的问题会解决

CSS：

.head0 .levelOne li { z-index:60; }
.head1 .levelOne li { z-index:50; }
.head2 .levelOne li { z-index:40; }
.head3 .levelOne li { z-index:30; }
.head4 .levelOne li { z-index:20; }
.head5 .levelOne li { z-index:10; }

.levelTwo {
    left: 157px;
    position: absolute;
    top: 0;
    background: #FFF;
    height: 40px;
    width: 162px; /* reduced the width here */
    display: block;
    z-index: 10;
}

截屏：

在此处输入图像描述

参考链接：

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.satzansatz.de/cssd/onhavinglayout.html#rp
于 2013-02-19T17:38:32.957 回答