CSS Z-Index 不适用于绝对定位

Question

我遇到以下情况：我的代码中有几个 div 个容器。

.outside {
  position: relative;
  z-index: 1;
}
.options {
  position: absolute;
  z-index: 999;
}

<div class="outside">
  <div class="inside">
    <div class="options">Content</div>
  </div>
</div>

上面三个div的选择重复了几次。我现在遇到的问题是外部 div 将与选项 div 重叠。我尝试使用 z-index 进行设置，但它不起作用。有人对此有解决方案吗？

Answer 1

将 position:relative; 和 z-index 从 .forum_post_outside 移动到 .forum_arrow_outside，同时从 .forum_arrow_outside 中删除 position: absolute;，还添加了 float: right;至 .forum_arrow_outside：

.forum_post_outside {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  min-height: 75px;
  padding: 0 5px;
  width: 100%;
  background-color: #333;
  margin-bottom: 2px;
}
.forum_arrow_outside {
  position: relative;
  z-index: 1;
  float: right;
  width: 150px;
}
.forum_arrow_top {
  position: absolute;
  top: 0;
  right: 0;
}
.forum_arrow_inside {
  max-width: 110px;
  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}
.forum_drop_down {
  margin: 0!important;
  margin-top: 10px!important;
  line-height: 20px;
  min-width: 110px;
  border-bottom: 1px solid #ccc;
  color: #000;
  
}

<div class="forum_post_outside">
  <div class="forum_arrow_outside">
    <div class="forum_arrow_inside">
      <div class="forum_drop_down">
        <img src="/images/delete_16.png">Delete</div>
      <div class="forum_drop_down">
        <img src="/images/unpin-16.png">Unpin</div>
      <div class="forum_drop_down">
        <img src="/images/edit_16.png">Edit</div>
    </div>
  </div>
</div>

<div class="forum_post_outside">

</div>

<div class="forum_post_outside">

</div>

CSS Z-Index 不适用于绝对定位

CSS Z-Index not working on absolute positioning

html

css

position

z-index