Html Z索引与Slim Select可折叠Div中的溢出

我举了一个例子，在一个简单的可折叠div中放置一个Slim Select下拉列表：

我的折叠沙发
值1
价值2
价值3
价值4
价值5
价值6
你好

你好

你好

你好

你好

你好

另一个可折叠的Div
你好

（有关完整的HTML和附带的CSS/Javascript，请参见上面的CodePen.io链接。）

当我打开两个部分并展开Slim Select下拉列表时，我只能看到前几个Slim Select选项“值1”到“值3”。我无法通过“值6”看到“值4”，除非我点击并按住鼠标按钮，这显然不是期望的行为

我尝试过改变所有组件的z索引，但没有成功。我相信这可能是由于Slim Select创建了一个z索引“堆叠上下文”，我还没有弄明白这一点

---

在我的示例中，我如何简单地看到“值1”到“值6”的所有内容？

我已经更新了您的代码，现在您可以看到“值1”到“值6”的所有内容

我在

.ss main.ss content.ss open上添加了css，还添加了
js

我希望这对你有帮助


$（文档）.ready（函数（）{
$（“.ss多选择”）。单击（函数（）{
$（this）.closest（'.content'）.css（“最大高度”、“继承”）；
});
});
window.onload=function（）{
//开始代码，多个选择下拉列表
var my_MSD_object=new SlimSelect({
选择：“#我的MSD”，
closeOnSelect:false，
});
//结束代码，多个选择下拉列表
//开始代码，可折叠部分
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i
/*开始样式，可折叠部分*/
.可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.活动，.可折叠：悬停{
背景色：#555；
}
.可折叠的：：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.active:：之后{
内容：“\2212”；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
}
.内容：活动{
溢出：可见；
}
/*css添加到下面*/
.ss main.ss-content.ss-open{
位置：相对位置；
}
/*端部样式，可折叠部分*/

我的折叠沙发
值1
价值2
价值3
价值4
价值5
价值6
你好

你好

你好

你好

你好

你好


------------------------------------------------------------
另一个可折叠的Div
你好

你好

你好


------------------------------------------------------------
下拉列表值是隐藏的，因为我们将overflow:hidden设置为content div。若要查看所有值，请使“content”div前面带有“active”元素的溢出可见。将下面的CSS与代码一起添加

.active + .content {
  overflow: visible;
}

.active + .content {
  overflow: visible;
}