這就是發生的事情，添加問題 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;}
1 回答
嚕嚕噠
TA貢獻1784條經驗 獲得超7個贊
首先，你textarea打開但沒有關閉，
對于你的問題，只需給z-index :1;而.dropdown不是.dropdown-content。
希望能幫助到你
- 1 回答
- 0 關注
- 99 瀏覽
添加回答
舉報
0/150
提交
取消