0

問題position: relative / absolute / fixed私はIE7で動作さ せるために多くのことを試みました。私は今これを解決することはできません。

.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 に答える