如何防止下拉菜单隐藏在Specter CSS徽章后面的按钮后面

Question

我在列表中使用Spectre CSS下拉菜单，并使用vue.js数据绑定动态地将badges放在它们上。我正在通过将div.dropdown包装在span中来完成这项工作，该工作有条件地拥有badge类。我的问题是，菜单窗格隐藏在任何具有活动徽章的按钮后面。我玩弄了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> 

这里是结果的图片：

嗯......好像没有了幽灵无标签CSS和我不能创建一个。好吧。

Answer 1

原来是一个问题，z-index被设置在应该显示在头像图片和活动按钮之上的元素上，这些元素默认情况下处于较高的z-index级别。通过改变我们的CSS来覆盖这些项目回到z-index：auto，并删除我们的其他z-index mods，问题（实际上这两个问题）是固定的。