Question

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

问题。如何将父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;
}

解决方案：＃parent的“visibility”应设置为“hidden”，＃child的“visibility”应设置为“visible”

小提琴在这里：http://jsfiddle.net/cxwQF/22/

z索引和子元素

2 个答案: