css - zindex 和子元素

Question

http://jsfiddle.net/cxwQF/12/。

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

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

标记：

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

CSS：

#image {
    position: relative;
    width: 100%;
    height: 500px;
    background: green;
    z-index: 2;
}

#image:hover {
    background: yellow;
}

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

/*#parent:hover {
    background: blue;
} */  

#child {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 3;
}​

Answer 1

这怎么适合你？如果不知道您要达到的目标，就很难知道如何构建它。

http://jsfiddle.net/cxwQF/21/

我div为你的“孩子”创造了另一个，但原来的（脚）仍然在同一个地方。

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

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

抱歉，边框样式纯粹是出于测试目的。

Answer 2

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

CSS：

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

Solution: #parent's "visibility" should be set to "hidden", #child's "visibility" should be set to "visible"

Fiddle is here: http://jsfiddle.net/cxwQF/22/