Css 引导下拉列表显示在其他元素后面

我有一个模板，混合了引导手风琴和下拉菜单，问题是下拉菜单出现在下一个问题卡后面，或者在你的问题卡里面是一样的，但看不到

template.html：

<div class="card-body">
  <!-- Acordion -->
  <div class="accordion" id="dlns_faqs_acordion">
    {% for element in elements %}
      <div class="card">
        <div class="card-header dlns_faqs_acordion_heading" id="dlns_faqs_acordion_heading_{{ forloop.counter0 }}">
          <h2 class="mb-0">
            <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#dlns_faqs_acordion_content_{{ forloop.counter0 }}" aria-expanded="false" aria-controls="dlns_faqs_acordion_content_{{ forloop.counter0 }}">
              {{ element.question }}
            </button>
          </h2>
          <!-- Options -->
          <div class="dropdown">
            <button class="btn dlns_elements_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="fas fa-ellipsis-h"></span>
            </button>
            <div class="dropdown-menu dropdown-menu-right text-center" arial-labelledby="option_button">
              ...
              <a>...</a>
              ...
            </div>
          </div>
        </div>
        <div id="dlns_faqs_acordion_content_{{ forloop.counter0 }}" class="dlns_faqs_acordion_content collapse" aria-labelledby="dlns_faqs_acordion_heading_{{ forloop.counter0 }}" data-parent="#dlns_faqs_acordion">
          <div class="card-body">
            {{ element.answer }}
          </div>
        </div>
    </div>
    {% endfor %}
  </div>
</div>

以下是一些出现问题的图像：

还有小提琴：

有人帮我吗？

---

提前感谢。

由于您没有创建小提琴或plnkr，我只能提供一些建议：

手动将下拉菜单框z-index调整为一个非常大的值，以查看其是否有效。 检查剪切下拉菜单的容器，以确保overflow属性设置为visible。 更新：

---

您是否尝试在下拉列表中使用z-index？是的，但不起作用。如果您添加工作代码，则会更容易为您提供帮助fiddle@AlbertoSanmartinMartinez用提琴更新了答案。溢出：可见未修复问题。@AlbertoSanmartinMartinez您检查过我粘贴的提琴了吗？它工作完美，你需要添加！重要的要覆盖现有溢出，您是否检查过JSFIDLE？

.dlns_faqs_acordion {
  border: none;
}

.dlns_faqs_acordion_heading {
  border: none;
  background: transparent;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  align-content: space-between;
}

.dlns_faqs_acordion_heading button {
  color: var(--dlns_color_primary) !important;
}

.dlns_faqs_acordion_heading button.collapsed {
  color: black !important;
}

.dlns_faqs_acordion_heading button:hover {
  text-decoration: none;
}

.dlns_faqs_acordion_content {
  color: var(--dlns_color_tertiary);
}

.card {
  overflow: visible;
}