Question

这是HTML：

CSS

/* Position and z-index */
.level2 {
    position: relative;
}
.level3 {
    position: relative;
    z-index: 1;
}
.level4 {
    position: absolute;
}

/* Styling */
.level2 {
    width: 200px;
    margin-bottom: 10px;
    background: lightgreen;
    padding: 5px;
    text-align: right;
}
.level3 {
    width: 200px;
    background: lightblue;
    text-align: right;
}
.level4 {
    background: lightyellow;
    top: 5px;
    left: 5px;
    width: 100px;
    height: 300px;
    text-align: right;
}

HTML

<div class="level2">
    <div class="level3">
        <div class="level4">level4</div>
        level3
    </div>
    level2
</div>
<div class="level2">
    level2
</div>
<div class="level2">
    level2
</div>

在Chrome中，.level4超过.level2，但不是在IE7中。如何在IE7中.level4覆盖.level2？

Answer 1

＆＃34;在Internet Explorer中，定位元素生成一个新的堆叠上下文，从z-index值0开始。因此z-index无法正常工作＆＃34;

<强> HTML

<div class="wrapper">
    <div class="level2">
        <div class="level3">
            <div class="level4">level4</div>
            level3
        </div>
        level2
    </div>
    <div class="level2">
        level2
    </div>
    <div class="level2">
        level2
    </div>
</div>

<强> CSS

仅适用于IE 7的条件注释

<!--[if IE 7]>
    <style>
        .wrapper > div:first-child{
            z-index: 2;
        }
    </style>
<![endif]-->

Demo

有用的文章

Click Here

希望它有所帮助。

IE7 z-index相对错误有三个级别的相对元素

1 个答案: