如何在任何div上方显示菜单下拉菜单

Question

我正面临一些css的困难。我有一个菜单项，我弹出一个菜单来重命名、隐藏或删除它，我已经包含了css，但是它在菜单中的div下面。我想把它放在上面。另外，我使用的是引导css。

片段：

​

.form-group {
  margin-bottom: 15px;
}
.pagesmenu {
  position: relative;
  background-color: #d3edff;
  border-radius: 7px;
  border: 1px solid #cde;
  box-sizing: border-box;
  color: #2b5672;
  height: 39px;
  line-height: 39px;
  padding-left: 12px;
  width: 200px;
}
.pagesmenu.selected {
  background-color: #d3edff;
}
.portlet-body.form {
  background: #f0f3f5;
  padding: 10px;
}
.pageoption {
  float: right;
  display: inline-block;
  margin-right: 10px;
}
.dropdownpageopt {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdownpageopt a {
  color: black;
  padding: 2px 6px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 9999;
}
.dropdownpageopt a:hover {
  background-color: #f1f1f1
}
.pageoption:hover .dropdownpageopt {
  display: block;
}

<div class="form-body ui-sortable" id="nitspopupmenu">

  <div class="form-group ui-sortable-handle" id="div-1">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Home<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-2">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> About Us<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-3">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Services<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-4">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Our Team<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-5">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Portfolio<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-6">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Clients<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-7">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Blog<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
  <div class="form-group ui-sortable-handle" id="div-8">
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Contact<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span>
    </div>
  </div>
</div>

​

请帮帮我。谢谢

Answer 1

在下拉菜单上应用更高的z-索引就可以了。

.dropdownpageopt {
  z-index:1; // can make this higher if required. eg, 99
}

Answer 2

.pagesmenu {
  position: inline-block;
  background-color: #d3edff;
  border-radius: 7px;
  border: 1px solid #cde;
  box-sizing: border-box;
  color: #2b5672;
  height: 39px;
  line-height: 39px;
  padding-left: 12px;
  width: 200px;
}

Answer 3

您可以在其内部的每个链接上对整个.dropdownpageopt类使用Z索引，因此整个白色框和其内部的其余部分都可以放在顶部，如下所示：

.dropdownpageopt {
    z-index: 99;
}

您可以在包含.dropdownpageopt类的css代码中添加z索引，例如：

 .dropdownpageopt {
     display: none;
     position: absolute;   /*<-- this is needed to make z-index work*/
     background-color: #f9f9f9;
     min-width: 100px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     margin-top: -30px;

     z-index: 99; /*<---this*/


  }

或在本节：

.pageoption:hover .dropdownpageopt {
    display: block;
    z-index: 99; /*<---this*/
}

您的问题是，Z索引只适用于已定位的元素(即:绝对/固定/相对)，您没有将其放在下拉菜单内的链接中(它解释为:这里。)。即使你这样做了，z索引也是有效的，它只对里面的链接起作用，白色的盒子也不会在顶部。因此，您需要将z索引放在整个下拉选项类中。

这个值不一定一定是99，甚至不是9999，我已经在.dropdownpageopt上尝试了2&1，它可以工作。

-I希望这能帮上忙。