Css zindex与子元素

注：红色和绿色框应相交。绿色框是图像或视频。悬停时它变成黄色。但不是在红色框开始的底部。红色框是控件（例如，下一个图像）

问题。如何将父div放在图像后面，将子div放在顶部

标记：

<div id='image'></div>
<div id='parent'>
    <div id='child'></div>
</div>​

---

这对你合适吗？如果不知道你想要实现什么，你很难知道如何构建它

我为您的“孩子”创建了另一个不可见的

div

，但原来的（脚）仍保留在原来的位置

<div id='image'></div>
<div id='foot'>

</div>
<div id='parent'>
<div id='child'></div>
</div>

---

很抱歉，边框样式纯粹用于测试目的。

我找到了纯CSS解决方案。标记保持不变

CSS:

解决方案：#父项的“可见性”应设置为“隐藏”，子项的“可见性”应设置为“可见”

---

Fiddle在这里：

关于你的孩子班级。。要使z索引处于活动状态，必须将位置更改为固定、绝对或相对。同意，我在#子元素中添加了“位置：相对”。不幸的是，这并没有使我更接近解决方案。你们是否可以让第二个父对象放在图像的顶部？老实说，我在搜索纯css解决方案。直观地说，层次结构不应该影响z索引，但它确实会影响。

<div id='image'></div>
<div id='foot'>

</div>
<div id='parent'>
<div id='child'></div>
</div>

#image {
    width: 100%;
    height: 500px;
    background: green;
}

#image:hover {
    background: yellow;
}

#parent {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    visibility: hidden;
}

#child:hover {
    background: pink;
}

#child {
    margin: 0 auto;
    visibility: visible;
    width: 100px;
    height: 100px;
    background: red;
}​