javascript - 溢出在父 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">
        <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>
    </ul>
  </div>
</div>

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

Answer 1

试试这个:

$(document).ready(function() {
  $("#dropdownMenuButton").click(function(){
    $('.dropdown-menu').toggle();
  })
})

.helper {
  min-height: 100px;
  max-height: 250px;
  position: relative;
}

.bs-example{
  border: 1px solid black;
  overflow-y: scroll;
  overflow-x: hidden;  
  min-height: 100px;
  max-height: 250px;
  left: 0px;
  right: 0px;
  position: absolute;
}

.dropdown {
  position: absolute;
  z-index: 999;
  left: 20px;
  top: 40px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <div class="helper">

    <div class="bs-example">
      <ul class="list-group ">
        <li class="list-group-item"></li>
      </ul>
    </div>

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

  </div>
</div>