html - 如何获得位置 :absolute div on top of relative of another parent

Question

这是我的代码

HTML

<div class="cont">
    <div class="inner">
        <div class="fixed"></div>
    </div>
</div>
<div class="second">
    <div class="relative"></div>
</div>

CSS

.cont{
    width:50px;
    position:fixed;
    background:red;
    height:100%;
    float:left;
}
.cont .inner{
    width:150px;
    position:relative;
    height:50px;
    background:green;
}
.fixed{
    position:absolute;
    width:160px;
    height:160px;
    left:50px;background:yellow;
    display:none;
}
.cont .inner:hover .fixed{
    display:block;
}
.second{
    margin-left:50px;
    height:1000px;
    width:100%;
}
.second .relative{
    position:relative;
    height:500px;
    background:blue
}

我需要将黄色的 DIV 放在蓝色的 DIV 之上，我需要固定左边的栏，蓝色的栏是相对的，请提出解决方案。

这是一个fiddle

提前致谢

Answer 1

请找到 jsfiddle 链接 http://jsfiddle.net/nileshmahaja/uw01vjmL/

我已经稍微更新了你的 css，请仔细查看。

.cont{
    width:50px;
    position:fixed;
    background:red;
    height:100%;
    float:left;
    z-index:1
}
.cont .inner{
    width:150px;
    position:relative;
    height:50px;
    background:green;
}
.fixed{
    position:absolute;
    width:160px;
    height:160px;
    left:50px;background:yellow;
    display:none;
}
.cont .inner:hover .fixed{
    display:block;
}
.second{
    margin-left:50px;
    height:1000px;
    width:100%;;
    position:relative;
    z-index:0
}
.second .relative{
    position:relative;
    height:500px;
    background:blue;

}