Question

我在正确理解 z-index 时遇到了问题。

请查看我为您创建的这个小提琴：http://jsfiddle.net/df3EL/

<div id="content">    
    1. Content

    <div id="popup">
        3. PopUp
    </div>
</div>

<div id="footer">
    2. Footer
</div>

我知道影响z-index的定位和不透明度。但是有了这个标记，无论我尝试什么，页脚都高于1＆amp; 3或以下 - 从不介于两者之间。

有没有办法让订单（1,2,3）工作，而不更改html标记？

Answer 1

z-index 继承自父元素

因此，如果您的1元素的z-index为100，则您的3元素不能超过全局范围中的该值。在本地范围内（在#content元素内），z-index将基本上“重置”

为了让你的事情发挥作用，你需要更改HTML标记以使每个元素独立（因此它们可以在全局范围内具有顺序z-index）

Answer 2

如果你想让popup成为悬停页脚，只需设置页脚和弹出窗口的索引：http://jsfiddle.net/df3EL/1/

div {
    font-family: Verdana;
    font-size: 11px;
    padding: 20px;
}

div#content {
    display: block;
    height: 150px;
    width: 250px;
    background: #eee;
    position: relative;
}

div#footer {
    display: block;
    height: 50px;
    width: 250px;
    background: #eeefc0;
    position: relative;
    left: 25px;
    top: -25px;
    z-index: 1;
}

div#popup {
    display: block;
    height: 140px;
    width: 100px;
    background: #C0C0EF;
    position: relative;
    left: 220px;
    top: -5px; 
    z-index: 2;
}

Answer 3

[http://jsfiddle.net/df3EL/3/][1]

删除除 div＃popup 以外的所有z-index属性它应该在现代浏览器中工作（假设ie9 +，chrome，opera，FF）

但更合乎逻辑的方法是在 #footer 之后移动 #popup （可能需要在显示弹出窗口时使用javascript）

Answer 4

您已使用position:relative div#footer和div#popup。将其更改为position: absolute并更改vaules top, bottom, left,right以获得所需的结果。

这样您就不必更改html结构。

z-index - 两个之间的绝对元素

4 个答案: