Html z-指数-两个其他元素之间的绝对元素

我无法正确理解z-index

请看一下我为您制作的小提琴：

1.内容
3.弹出窗口
2.页脚

我知道位置和不透明度会影响z索引。但是有了这个标记，不管我怎么做，页脚都在

1

和

3

的上方或下方-从不介于两者之间

---

是否有任何方法可以在不更改html标记的情况下使顺序（1、2、3）正常工作？

z-index继承自父元素

因此，如果

1

元素的z索引为100，则

3

元素在全局范围内不能超过该值。在本地范围内（在

#content

元素内），z索引基本上会“重置”

---

因此，要使您的工作正常，您需要更改HTML标记，使每个元素独立（这样它们可以在全局范围内具有顺序的z索引）

z索引继承自父元素

因此，如果

1

元素的z索引为100，则

3

元素在全局范围内不能超过该值。在本地范围内（在

#content

元素内），z索引基本上会“重置”

---

因此，为了使您的工作正常，您需要更改HTML标记以使每个元素独立（这样它们可以在全局范围内具有顺序的z索引）

您已经为

div\footer

和

div\popup

使用了

position:relative

。将其更改为

position:absolute

并更改变量

top、bottom、left、right

，以获得所需的结果。

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

您已将

position:relative

用于

div\footer

和

div\popup

。将其更改为

位置：绝对

，并更改变量

顶部、底部、左侧、右侧

，以获得所需的结果。

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

如果您希望弹出窗口为悬停页脚，只需为页脚和弹出窗口设置索引：

---

如果希望弹出窗口为悬停页脚，只需为页脚和弹出窗口设置索引：

删除除div#popup 它应该在现代浏览器中工作（假设ie9+、chrome、opera、FF）

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

删除除div#popup 它应该在现代浏览器中工作（假设ie9+、chrome、opera、FF）

---

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

感谢您的尝试，但这不会起作用。仍然不会介于

1

和

3

之间。感谢您的尝试，但这不会起作用。仍然不会介于

1

和

3

之间。啊，全局范围。这是我错过的一点。谢谢你，先生！没问题-希望有帮助！是的，有帮助，但它们不能在同一个分区中。

2

页脚是全宽的，内容是960px:/Ahhh，全局范围。这是我错过的一点。谢谢你，先生！没问题-希望有帮助！是的，有帮助，但它们不能在同一个分区中。

2

页脚是全宽的，内容是960px:/这很有效，是最简单的答案。太遗憾了，我无法从主容器中删除z-index。谢谢你的回答。帮了我很多忙！有什么原因不能从内容中删除z-index吗？它们是旧的解决方法。不能冒险更改主容器的css，太大的项目。但是我将使用您的修复，而不是使用JQuery更改特定页面上的标记<代码>$（'#content'）.css（'z-index'，'auto'）它就像z-index:auto；或者从CSS中删除z索引。这就是jQuery所做的。对，我正在用jQuery解决问题。谢谢你的帮助！这是最简单的答案。太遗憾了，我无法从主容器中删除z-index。谢谢你的回答。帮了我很多忙！有什么原因不能从内容中删除z-index吗？它们是旧的解决方法。不能冒险更改主容器的css，太大的项目。但是我将使用您的修复，而不是使用JQuery更改特定页面上的标记<代码>$（'#content'）.css（'z-index'，'auto'）它就像z-index:auto；或者从CSS中删除z索引。这就是jQuery所做的。对，我正在用jQuery解决问题。谢谢你的帮助！

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;
}

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