javascript - 使用 li 时溢出正在父 div 后面发送下拉列表，z-index 不起作用

Question

伙计们，我似乎无法弄清楚为什么溢出会破坏代码

所以下面的代码在两种情况下都能正常工作。a) 如果我从 .bs-exmple 中删除 overflow-x 和 overflow-y，或者 b) 如果我删除 ul 和 li

但我在我的代码中都需要，但是由于这些 css 和 ul 和 li 在代码中，下拉列表在 div 后面折叠。我错过了什么

.bs-example {   border: 1px solid black;   overflow-y: scroll;   overflow-x: hidden;   min-height: 100px;   max-height: 250px; }
.bs-example .dropdown {   position: absolute;   z-index: 999; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="bs-example">
    <ul class="list-group ">
      <li class="list-group-item m-3 p-3">User 1
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Menu
                </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>

      </li>

      <li class="list-group-item  m-3 p-3">User 2
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Menu2
                </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>

      </li>
    </ul>
  </div>
</div>

所以你看，下图显示了 div 后面的下拉菜单

我在这里保存了codepen https://codepen.io/ozsie6935/pen/NEZBwW?editors=1100

任何帮助深表感谢

标签： javascripthtmlcssbootstrap-4