下拉内容后面的元素显示在前面/与下拉内容一起显示

Question

这就是发生的事情，添加问题 div 不应该在那里......它位于下拉内容的后面。我尝试将“添加问题”div 的 z 索引设置为小于下拉内容的 z 索引的数字，但即使在添加 !important 到“添加问题”div 的 z 索引后，它仍然出现。任何见解将不胜感激。

这是我的代码：

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

}

Answer 1

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