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，同时从position: absolute;移除.forum_arrow_outside，同时将float: right;添加到.forum_arrow_outside {1}}：

.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>