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

Question

Here's what's happening, the Add question div is not supposed to be there... It's behind the dropdown content. I tried to set the z-index of the Add Question div to a number less than the z-index of the dropdown-content however it is still appearing even after adding !important to the z-index of the Add Question div. Any insight would be appreciated.

Here's my code:

<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: bump

Answer 1

First, your textarea opened but not closed,
For your problem just give z-index :1; to .dropdown instead of .dropdown-content.
Hope it helps