CSS: 溢出元素不显示尽管溢出：可见

Question

我想在固定工具栏上添加一个下拉菜单，但是 .toolbar-dropdown-menu 元素没有显示，如下面的屏幕截图所示（用 Google Chrome 80.0 测试):

我的第一印象是 .toolbar-dropdown-menu 的行为就好像它的父级设置为 overflow: hidden：如果我让父级 .toolbar-btn 更宽，.toolbar-dropdown-menu显示在其父项的边界内：

然而，即使我明确地将所有元素设置为 overflow: visible，.toolbar-dropdown-menu 仍然不可见，即使它的显示设置为 block 并且它的可见性设置为 visible ].

问题：为什么 .toolbar-dropdown-menu 元素不可见，如何让它显示出来？

这是一个代码片段：

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

.floating-toolbar {
  position: fixed;
  z-index: 1031;
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

.floating-toolbar.left {
  left: 0;
}

.floating-toolbar.left .toolbar-btn .toolbar-icon {
  right: 0.5rem;
}

.floating-toolbar.left .toolbar-dropdown > .toolbar-dropdown-menu {
  position: absolute;
  left: 21rem;
  top: 0;
}

.floating-toolbar.left.minimized {
  left: -18.5rem;
}

.floating-toolbar .toolbar-btn {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding: 0.5rem;
  font-size: 1rem;
  width: 20rem;
  cursor: pointer;
}

.floating-toolbar .toolbar-btn:last-child {
  border-bottom: none;
}

.floating-toolbar .toolbar-btn.active {
  color: #fff;
}

.floating-toolbar .toolbar-btn .toolbar-icon {
  position: absolute;
  text-align: center;
  width: 1.5rem;
  top: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<div id="studio-toolbar" class="floating-toolbar top left minimized">

    <div class="toolbar-btn maximize-button">
        <div class="toolbar-label">&nbsp;</div>
        <div class="toolbar-icon"><i class="fas fa-bars"></i></div>
    </div>
    
    <div class="toolbar-btn active">
        <div class="toolbar-label">Edit Text</div>
        <div class="toolbar-icon"><i class="fas fa-font"></i></div>
    </div>
    <div class="toolbar-btn">
        <div class="toolbar-label">Element Properties</div>
        <div class="toolbar-icon"><i class="fas fa-edit"></i></div>
    </div>
    
    <div class="toolbar-btn toolbar-dropdown">
        <div class="toolbar-label">Layout Structure</div>
        <div class="toolbar-icon"><i class="fas fa-grip-horizontal"></i></div>
        
        <div class="toolbar-dropdown-menu">
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Offset</div>
                <div class="toolbar-icon"><i class="fas fa-long-arrow-alt-right"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Width</div>
                <div class="toolbar-icon"><i class="fas fa-arrows-alt-h"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Add Row</div>
                <div class="toolbar-icon"><i class="fas fa-plus-square"></i></div>
            </div>
        </div>
        
    </div>
</div>

Answer 1

在您的代码示例中，我看到了下拉菜单。只是 background-color 是 white 所以它不可见。

.floating-toolbar {
  position: fixed;
  z-index: 1031;
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

.floating-toolbar.left {
  left: 0;
}

.floating-toolbar.left .toolbar-btn .toolbar-icon {
  right: 0.5rem;
}

.floating-toolbar.left .toolbar-dropdown > .toolbar-dropdown-menu {
  position: absolute;
  left: 21rem;
  top: 0;
  background-color: #333;
}

.floating-toolbar.left.minimized {
  left: -18.5rem;
}

.floating-toolbar .toolbar-btn {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding: 0.5rem;
  font-size: 1rem;
  width: 20rem;
  cursor: pointer;
}

.floating-toolbar .toolbar-btn:last-child {
  border-bottom: none;
}

.floating-toolbar .toolbar-btn.active {
  color: #fff;
}

.floating-toolbar .toolbar-btn .toolbar-icon {
  position: absolute;
  text-align: center;
  width: 1.5rem;
  top: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<div id="studio-toolbar" class="floating-toolbar top left minimized">

    <div class="toolbar-btn maximize-button">
        <div class="toolbar-label">&nbsp;</div>
        <div class="toolbar-icon"><i class="fas fa-bars"></i></div>
    </div>
    
    <div class="toolbar-btn active">
        <div class="toolbar-label">Edit Text</div>
        <div class="toolbar-icon"><i class="fas fa-font"></i></div>
    </div>
    <div class="toolbar-btn">
        <div class="toolbar-label">Element Properties</div>
        <div class="toolbar-icon"><i class="fas fa-edit"></i></div>
    </div>
    
    <div class="toolbar-btn toolbar-dropdown">
        <div class="toolbar-label">Layout Structure</div>
        <div class="toolbar-icon"><i class="fas fa-grip-horizontal"></i></div>
        
        <div class="toolbar-dropdown-menu">
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Offset</div>
                <div class="toolbar-icon"><i class="fas fa-long-arrow-alt-right"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Column Width</div>
                <div class="toolbar-icon"><i class="fas fa-arrows-alt-h"></i></div>
            </div>
            <div class="toolbar-btn">
                <div class="toolbar-label">Add Row</div>
                <div class="toolbar-icon"><i class="fas fa-plus-square"></i></div>
            </div>
        </div>
        
    </div>
</div>

CSS: 溢出元素不显示尽管溢出：可见

CSS: Overflowing element is not displayed despite overflow: visible

html

css

overflow