我做了一个例子，在一个简单的可折叠 div 中放置一个 Slim Select 下拉菜单: https://codepen.io/wbraswell/pen/gEbdoX
<html>
<head>
<!-- MULTIPLE SELECT DROPDOWNS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.css"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.js"></script>
</head>
<body>
<button class="collapsible">My Collapsible Div</button>
<div class="content" style="z-index: 900;">
<select id="my_MSD" multiple>
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
<option value="value 4">Value 4</option>
<option value="value 5">Value 5</option>
<option value="value 6">Value 6</option>
</select>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
</div>
<button class="collapsible">Another Collapsible Div</button>
<div class="content" style="z-index: 800;">
Howdy<br>
</div>
</body>
</html>
(有关完整的 HTML 和随附的 CSS/Javascript，请参阅上面的 CodePen.io 链接。)
当我展开两个部分并展开 Slim Select 下拉菜单时，我只能看到前几个 Slim Select 选项“值 1”到“值 3”。我无法通过“值 6”看到“值 4”，除非我单击并按住鼠标按钮，这显然不是所需的行为。
我已尝试更改有关所有组件的 z-index 的所有内容，但没有成功。我相信这可能是由于 Slim Select 创建了一个我还没有弄清楚的 z-index“堆栈上下文”造成的。
在我的示例中，如何简单地查看“值 1”到“值 6”的所有内容？
最佳答案
下拉值是隐藏的，因为我们将 overflow: hidden 设置为内容 div。要查看所有值，请使“content”div 的溢出可见，前面是“active”元素。添加以下 CSS 以及您的代码。
.active + .content {
overflow: visible;
}
关于html - 使用 Slim Select 的可折叠 Div 中的 Z-Index 与溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54898231/