见jsfiddle - 谢谢@haxxxton
HTML示例
<div class="icon-btn">
click me
</div>
<div class="sidebar-panel">
<div class="close" style="width: 24px; height: 24px;background: red;position: relative; top: 0; left: -50px;z-index:9200">
x
</div>
<div>
<div style="border: 1px solid #eee;">
test
</div>
</div>
</div>
<div id="overlay"></div>
红色框表示关闭按钮。问题是它隐藏在叠加层下面。尝试过定位,z-index。还试图创建额外的div来包装侧边栏面板,但由于没有定义宽度,它不能容纳所有内容。
您在代码中看到的内联样式用于测试是否实际显示。
更新
CSS
.sidePanelOpen .icn-close-trend{
z-index: 9100;
}
.icn-close-trend {
background: url('../img/icon-close.png') no-repeat;
width: 28px;
height: 27px;
display: inline-block;
position: absolute;
top: 0;
left: -70px;
padding: 35px;
}
仍然没有帮助 - 它仍然是隐藏的
答案 0 :(得分:0)
你的关闭框有一个内联样式,左边是-50px,然后把它推到黑盒子下面。大约-35px
使它齐平。
参考:
<div class="close" style="width: 24px; height: 24px;background: red;position: relative; top: 0; left: -35px;">
我强烈建议不要使用内联样式,而是将它们直接应用于“close”类。
另外,为了您的参考,除非您还声明位置(相对/绝对/固定),否则z-index值不起作用。并非在这种情况下确实需要它。
答案 1 :(得分:0)
.sidebar-panel
的属性overflow-y: auto
似乎正在推动你的红色.close
div下方。如果你杀了overflow-y: auto
,.close
就会很好地坐在架子上。
小提琴:http://jsfiddle.net/26wdr/
如果您担心可以滚动书架的内容,我建议在书架内使用一个固定高度的容器div
并使其可滚动。