下拉内容后面的元素显示在 front/with 下拉内容中

Question

这是怎么回事，添加问题 div 不应该在那里...它在下拉内容的后面。我试图将添加问题 div 的 z-index 设置为小于下拉内容的 z-index 的数字，但是即使在将 !important 添加到添加问题的 z-index 之后它仍然出现div。任何见解将不胜感激。

这是我的代码：

<div v-for="(q, i) in questions" :key="i" class="d-flex flex-column">
    <p class="formTitle" style="margin-top: 24px;">Question {{i + 1}}</p>

    <textarea class="descTextArea" placeholder="Enter your question" />

    <div class="dropdown" style="width: 300px; margin-top: 24px;">
        <div class="input-group mb-3">
            <button
            class="form-control inputStyle text-left dropdownMenuButton"
            >{{q.type}}</button>
            <div class="input-group-append">
                <span class="input-group-text inputStyle">
                    <CaretDownIcon />
                </span>
            </div>
        </div>
        <div class="dropdown-content">
            <div v-for ="(op, i) in dropdownOptions" class="d-flex flex-row" :key="i"  @click="q.type = op.title">
                <img class="dropDownImage" :src="require(`../../../assets/images/dashboard/${op.icon}.png`)" height="35" width="50" />
                <div class="d-flex flex-column">
                    <p class="dropDownTitle">{{op.title}}</p>
                    <p class="dropdownText">{{op.desc}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
<hr style="color: #DCDEE4; height: 1px; width: 95%;" />

<div class="d-flex flex-row addQuestion" @click="AddQuestion">
    <PointsButton />
    <p class="labelText" style="margin-left: 12px; transform: translateY(5px)">Add question</p>
</div>

.dropdown {
  position: relative;
  display: inline-block;
  transform: translateY(-10px);
  margin-right: 16px;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content div {
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-content div:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.addQuestion {
    margin-top: 37px; 
    cursor: pointer; 
    width: 150px;
    // position: relative;
    // z-index: 0;
}

编辑： 颠簸

Answer 1

首先，你的textarea打开但没有关闭，
对于您的问题，只需将 z-index :1; 给 .dropdown 而不是 .dropdown-content.
希望对你有帮助

下拉内容后面的元素显示在 front/with 下拉内容中

Element behind dropdown content showing up in front/with dropdown content

html

css

z-index

vue.js