Html CSS:overflow元素不显示，尽管overflow:visible

我想在固定工具栏上添加一个下拉菜单，但是

.toolbar下拉菜单

元素没有显示在下面的屏幕截图中（使用Google Chrome 80.0测试）：

我的第一印象是，

.toolbar下拉菜单

的行为就好像它的父级被设置为

溢出：隐藏

：如果我将父级

.toolbar btn

加宽，则

.toolbar下拉菜单

显示在父级的边界内：

但是，即使我显式地将所有元素设置为

溢出：可见

，

.toolbar下拉菜单

仍然不可见，即使其显示设置为

块

，其可见性设置为

可见

问题：为什么

.toolbar下拉菜单

元素不可见？如何使其显示

下面是一段代码片段：

（这是工具栏的简化版本。它通常可以分配到不同的位置并展开以显示标签，但我排除了这些功能，以尽量减少您必须执行的代码）

。浮动工具栏{
位置：固定；
z指数：1031；
背景：#333；
颜色：rgba（255，255，255，0.5）；
}
.floating-toolbar.left{
左：0；
}
.floating-toolbar.left.toolbar btn.工具栏图标{
右：0.5雷姆；
}
.floating-toolbar.left.toolbar下拉菜单>.toolbar下拉菜单{
位置：绝对位置；
左：21rem；
排名：0；
}
.floating-toolbar.left.minimized{
左：-18.5雷姆；
}
.浮动工具栏.工具栏btn{
位置：相对位置；
边框底部：1px实心rgba（255、255、255、.5）；
填充：0.5雷姆；
字号：1rem；
宽度：20雷姆；
光标：指针；
}
.浮动工具栏.工具栏btn:最后一个子级{
边框底部：无；
}
.浮动工具栏.toolbar-btn.active{
颜色：#fff；
}
.浮动工具栏.工具栏btn.工具栏图标{
位置：绝对位置；
文本对齐：居中；
宽度：1.5雷姆；
顶部：0.5雷姆；
}

编辑文本
元素属性
布局结构
列偏移量
列宽
添加行

在您的代码示例中，我看到了下拉列表。只需

背景色

为

白色

，因此不可见

。浮动工具栏{
位置：固定；
z指数：1031；
背景：#333；
颜色：rgba（255，255，255，0.5）；
}
.floating-toolbar.left{
左：0；
}
.floating-toolbar.left.toolbar btn.工具栏图标{
右：0.5雷姆；
}
.floating-toolbar.left.toolbar下拉菜单>.toolbar下拉菜单{
位置：绝对位置；
左：21rem；
排名：0；
背景色：#333；
}
.floating-toolbar.left.minimized{
左：-18.5雷姆；
}
.浮动工具栏.工具栏btn{
位置：相对位置；
边框底部：1px实心rgba（255、255、255、.5）；
填充：0.5雷姆；
字号：1rem；
宽度：20雷姆；
光标：指针；
}
.浮动工具栏.工具栏btn:最后一个子级{
边框底部：无；
}
.浮动工具栏.toolbar-btn.active{
颜色：#fff；
}
.浮动工具栏.工具栏btn.工具栏图标{
位置：绝对位置；
文本对齐：居中；
宽度：1.5雷姆；
顶部：0.5雷姆；
}

编辑文本
元素属性
布局结构
列偏移量
列宽
添加行

在您的代码示例中，我看到了下拉列表。只是背景是白色的，所以看不见。天哪，我真不敢相信我居然没看到。超复杂思维的经典例子。。。非常感谢！请将此添加为答案，以便我将其标记为已接受的答案。