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

【问题标题】：How to show dropdown menu in modal above red div?如何在红色div上方的模态中显示下拉菜单？
【发布时间】：2017-05-02 02:47:51
【问题描述】：

我在引导模式内的下拉菜单有问题。我还有另一个红色的 div 框。我需要打开的下拉菜单位于这个红色框的上方。 Z-index 不起作用...

这是我 fiddle 和 css。

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

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

【问题讨论】：

标签： html css twitter-bootstrap drop-down-menu bootstrap-modal

【解决方案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;
}

【讨论】：

不，我需要模式上方的红色框，但红色框之前的下拉菜单
你的意思是模态框内的下拉菜单需要在红框上方。对吗？

【解决方案2】：

您需要更改#myModal 的z-index 而不是下拉菜单。因为下拉的父元素是模态的。原因是 z-index 总是从父级继承（如果已设置）。所以默认情况下，从引导程序中，模态（下拉菜单的父级）有 z-index 值。

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

希望对你有所帮助。

【讨论】：

不，我需要模式上方的红色框，但红色框之前的下拉菜单
你不能那样做。正如答案中的 z-index 总是从父级继承的。实现这一点的唯一方法是将红色 div 放在模态框内。