下载在模态下打开 - CSS问题 [英] Dropdown Opens Under Modal - CSS Issue

问题描述

我有一个bootstrap模式，里面有几个下拉菜单，因为我设置了很多东西 overflow：auto 所以它有滚动条（参见右侧的滚动条）图片）。

I have a bootstrap modal which has several dropdowns inside it due to lots of stuff I set overflow: auto so that it has scroll bar (see scroll bar at right side of the pic).

现在的问题是当我点击下拉列表时它会在模态下打开（见图片）我需要下拉菜单才能打开该模态。

Now problem is when I click dropdown it opens under the modal (see image) I need dropdown to open over that modal.

PS：我用google搜索并找到了许多解决方案，我们需要设置模态CSS属性 overflow：visible 。但在我的情况下，我必须设置 overflow：auto 因为我在模态中有很多东西，滚动条是必要的，否则模态高度越过页面。

P.S: I googled and found lots of solution where we need to set modal CSS property overflow: visible. But in my case I have to set overflow: auto coz I have lots of stuff inside modal and scroll bar is necessary otherwise modal height goes over the page.

需要一些CSS专家来解决这个问题。

Need some CSS expert to fix this issue.

模态CSS

.modal {
  max-height: 250px;
  overflow: auto; 
}

下拉CSS

ul.dropdown {
  z-index: 999999;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

 ul.dropdown li {
  top: 110%;
  padding: 0;
  max-width: 500px;
  max-height: 197px;
  position: absolute;
} 

推荐答案

您需要为您的下拉列表提供绝对位置，如此

Hi you need to give the absolute position for your dropdown ul like this

ul.dropdown {
  position: absolute;
  top: 110%;
  display: inline-block;
  vertical-align: middle;
}

和li儿童：

ul.dropdown li {
  padding: 0;
  max-width: 500px;
  max-height: 197px;
} 

这篇关于下载在模态下打开 - CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！