下拉内容后面的元素显示在前面/带有下拉内容

Question

这是正在发生的事情，不应在“添加”问题div中出现……它位于下拉菜单内容的后面。我试图将“添加问题” div的z-index设置为小于下拉列表内容的z-index的数字，但是即使将！important添加到“添加问题” div的z-index中，它仍然会出现。任何见识将不胜感激。

这是我的代码：

<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;
}

EDIT：凹凸

Answer 1

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