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/

我为你的“ child ”创建了另一个不可见的 div，但原来的(脚)仍然在同一个地方。

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

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

抱歉，边框样式纯粹是为了测试目的。