Css 下拉忽略父级溢出

我有一个模态，元素中有下拉列表

问题是，由于我有一个溢出集，下拉列表虽然出现，但并没有出现在模式的顶部。我理解，因为我在父对象上设置了溢出：auto

有没有办法通过CSS忽略父对象并在“模式”上方显示下拉列表

您将在示例中看到，如果滚动，红线中的内容是可见的。这是目前基于我的代码的预期行为。我需要做什么调整来显示模式上方的下拉列表

我试着用z-index进行修正，我在上面的某个地方读到了一些东西，以便将祖父母的位置设置为相对位置

更喜欢只使用CSS的解决方案

谢谢

.w-100{
宽度：100%；
身高：100%；
}
.h-100{
宽度：100%；
身高：100%：
}
.模态叠加{
身高：100%；
宽度：100%；
位置：固定；
排名：0；
左：0；
显示：块；
z指数：65；
填充顶部：100px；
溢出：自动；
背景色：rgba（0,0,0,6）；
}
.模态小型{
最大宽度：600px；
宽度：40%；
保证金：0自动；
浮动：无；
显示：块；
位置：相对位置；
背景色：#fff；
填充：0；
}
.集装箱{
最小高度：120px；
最大高度：400px；
溢出：自动；
填充：15px；
}
.元素容器{
高度：100px；
宽度：100%；
显示：内联块；
填充：10px；
边缘底部：10px；
位置：相对位置；
}
.element flex容器{
显示器：flex；
对齐项目：居中；
身高：100%；
填充：5px15px；
边界半径：2px；
边框底部：3倍实心rgba（0,0,0,1）；
左边框：1px实心rgba（0,0,0,1）；
右边框：1px实心rgba（0,0,0,1）；
边框顶部：1px实心rgba（0,0,0,1）；
}
.阿凡达{
高度：32px；
宽度：32px；
边界半径：100%；
右边距：10px；
}
.flex-1{
弹性：1；
}
.下拉宽度{
文本对齐：右对齐；
宽度：100px；
}
.下拉式容器{
显示：内联；
位置：相对位置；
}
.切换下拉列表{
颜色：#4caf50
}
.下拉列表{
位置：绝对位置；
边框：1px纯红；
左：自动；
右：0；
宽度：120px；
显示：块；
背景色：#fff；
z指数：10；
边缘底部：20px；
填充：0；
}

这里有东西
切换
这里有东西


别的


别的


别的


别的

您需要在下拉css中使用z索引999和相对位置。 例如：

.w-100{
宽度：100%；
身高：100%；
}
.h-100{
宽度：100%；
身高：100%：
}
.模态叠加{
身高：100%；
宽度：100%；
位置：固定；
排名：0；
左：0；
显示：块；
z指数：65；
填充顶部：100px；
溢出：自动；
背景色：rgba（0,0,0,6）；
}
.模态小型{
最大宽度：600px；
宽度：40%；
保证金：0自动；
浮动：无；
显示：块；
位置：相对位置；
背景色：#fff；
填充：0；
}
.集装箱{
最小高度：120px；
最大高度：400px；
溢出：自动；
填充：15px；
}
.元素容器{
高度：100px；
宽度：100%；
显示：内联块；
填充：10px；
边缘底部：10px；
位置：相对位置；
}
.element flex容器{
显示器：flex；
对齐项目：居中；
身高：100%；
填充：5px15px；
边界半径：2px；
边框底部：3倍实心rgba（0,0,0,1）；
左边框：1px实心rgba（0,0,0,1）；
右边框：1px实心rgba（0,0,0,1）；
边框顶部：1px实心rgba（0,0,0,1）；
}
.阿凡达{
高度：32px；
宽度：32px；
边界半径：100%；
右边距：10px；
}
.flex-1{
弹性：1；
}
.下拉宽度{
文本对齐：右对齐；
宽度：100px；
}
.下拉式容器{
显示：内联；
位置：相对位置；
}
.切换下拉列表{
颜色：#4caf50
}
.下拉列表{
位置：相对位置；
z指数：9999；
边框：1px纯红；
左：自动；
右：0；
宽度：120px；
显示：块；
背景色：#fff；
z指数：10；
边缘底部：20px；
填充：0；
}

这里有东西
切换
这里有东西


别的


别的


别的


别的

您需要在下拉css中使用z索引999和相对位置。 例如：

.w-100{
宽度：100%；
身高：100%；
}
.h-100{
宽度：100%；
身高：100%：
}
.模态叠加{
身高：100%；
宽度：100%；
位置：固定；
排名：0；
左：0；
显示：块；
z指数：65；
填充顶部：100px；
溢出：自动；
背景色：rgba（0,0,0,6）；
}
.模态小型{
最大宽度：600px；
宽度：40%；
保证金：0自动；
浮动：无；
显示：块；
位置：相对位置；
背景色：#fff；
填充：0；
}
.集装箱{
最小高度：120px；
最大高度：400px；
溢出：自动；
填充：15px；
}
.元素容器{
高度：100px；
宽度：100%；
显示：内联块；
填充：10px；
边缘底部：10px；
位置：相对位置；
}
.element flex容器{
显示器：flex；
对齐项目：居中；
身高：100%；
填充：5px15