html - 如何防止下拉菜单隐藏在 Spectre CSS 中带有徽章的按钮后面

Question

我正在使用 Spectre CSS列表中的下拉菜单并放置 badges使用 vue.js 在它们上动态使用数据绑定(bind)。我通过将 div.dropdown 包装在一个有条件地具有 badge 类的 span 中来做到这一点。我的问题是菜单 Pane 隐藏在任何具有事件徽章的按钮后面。我在 ul.menu 上尝试了 z-index，但没有效果。任何人都知道是什么原因和/或如何解决它？额外的功劳......我注意到当 active 类位于带有徽章的下拉按钮上时，徽章位于按钮后面而不是按钮前面，这对我来说似乎是错误的。它不会对常规按钮执行此操作，仅对下拉按钮执行此操作。

这是(精简的)html:

<div class="column col-2">
<template v-for="(o, i) in list">
    <span :class="{badge: o.qty > 0}" :data-badge="o.qty">
        <div class="dropdown dropdown-right">
            <div class="btn-group">
                <button class="btn" :class="{active: i == current}">
                    {{o.name}}
                </button>
                <button class="btn dropdown-toggle" :class="{active: i == current}" tabindex="0">
                    <i class="icon icon-caret"></i>
                </button>
                <ul class="menu">
                    <li class="menu-item"> ... </li>
                    ...
                </ul>
            </div>
        </div>
    </span>
</template>
</div>

这是结果的图片:

嗯...似乎没有用于 Spectre CSS 的标签，我无法创建一个。好吧。

Answer 1

事实证明，在本应显示在头像图像和事件按钮上方的元素上设置 z-index 是一个问题，在默认情况下，这些元素在 spectre 中处于较高的 z-index 级别。通过更改我们的 CSS 以将这些元素覆盖回 z-index:auto，并删除我们的其他 z-index mod，问题(实际上这两个问题)都得到了解决。