Question

见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;
}

仍然没有帮助 - 它仍然是隐藏的

Answer 1

你的关闭框有一个内联样式，左边是-50px，然后把它推到黑盒子下面。大约-35px使它齐平。

参考：

<div class="close" style="width: 24px; height: 24px;background: red;position: relative; top: 0; left: -35px;">

我强烈建议不要使用内联样式，而是将它们直接应用于“close”类。

另外，为了您的参考，除非您还声明位置（相对/绝对/固定），否则z-index值不起作用。并非在这种情况下确实需要它。

Answer 2

.sidebar-panel的属性overflow-y: auto似乎正在推动你的红色.close div下方。如果你杀了overflow-y: auto，.close就会很好地坐在架子上。

小提琴：http://jsfiddle.net/26wdr/

如果您担心可以滚动书架的内容，我建议在书架内使用一个固定高度的容器div并使其可滚动。

例如http://jsfiddle.net/K5F9D/

红色框中的关闭被叠加隐藏

2 个答案: