如何防止下拉菜單隱藏在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，問題（實際上這兩個問題）是固定的。