Question

我的下拉菜单有一个问题，它位于bootstrap模式中。我有另一个红色的div-box。我需要打开的下拉菜单位于此红色框之上。 Z指数不起作用......

这是我fiddle和css。

.box1 {
  display: block;
  position: absolute;
  height: 50px;
  width: 100px;
  background: red;
  z-index: 10000;
  left: 280px;
  top: 200px;
}
#menu1 {
  z-index: 100001;
}

已编辑：上方红色框和redboxe上方的模式下拉菜单。

Answer 1

只需将z-index: 10000从box1更改为z-index: 999，就像这样：

.box1 {
    display: block;
    position: absolute;
    height: 50px;
    width: 100px;
    background: red;
    z-index: 999;
    left: 280px;
    top: 200px;
}

Answer 2

您需要更改#myModal的z-index而不是下拉菜单。因为下拉列表的父元素是模态的。原因是z-index始终从父级继承（如果已设置）。因此默认来自bootstrap模态的z-index值（下拉列表的父级）。

.box1 {
  display: block;
  position: absolute;
  height: 50px;
  width: 100px;
  background: red;
  z-index: 10000;
  left: 280px;
  top: 200px;
}
#myModal {
  z-index: 10001;
}

希望这会对你有所帮助。

如何在红色div上方的模态中显示下拉菜单？

2 个答案: