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

时间:2014-07-10 14:51:11

标签: css

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

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

2 个答案:

答案 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并使其可滚动。

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