Question

我遇到了一些css的困难。我有一个菜单项，我弹出一个菜单来重命名，隐藏或删除它，我已经包含了css，但它低于菜单中的div。我希望它在顶部。我也使用bootstrap css。

段：

＆＃13;

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

＆＃13;

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

＆＃13;

请帮帮我。感谢

Answer 1

在下拉菜单中应用更高的z-index就可以了。

.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-index，所以整个白框和其中的其余部分可以在顶部，如下所示：

.dropdownpageopt {
    z-index: 99;
}

你可以在你的css代码中附加z-index包含.dropdownpageopt类，例如：

 .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-index仅适用于posiotioned元素（即：绝对/固定/相对），你在dropdownpageopt中的链接中放置了它（它解释为：Here. ）。即使你这样做并且z-index正常工作，它也只适用于里面的链接，白盒子不会停留在顶部。所以你需要把z-index放在整个dropdownpageopt类中。

并且值确实必须是99或甚至9999，我已经尝试了2＆amp; 1 .dropdownpageopt，它工作。

- 我希望有这个帮助。

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

3 个答案: