這就是發(fā)生的事情，添加問題 div 不應(yīng)該在那里......它位于下拉內(nèi)容的后面。我嘗試將“添加問題”div 的 z 索引設(shè)置為小于下拉內(nèi)容的 z 索引的數(shù)字，但即使在添加 !important 到“添加問題”div 的 z 索引后，它仍然出現(xiàn)。任何見解將不勝感激。這是我的代碼：<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貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
首先，你textarea打開但沒有關(guān)閉，
對(duì)于你的問題，只需給z-index :1;而.dropdown不是.dropdown-content。
希望能幫助到你
- 1 回答
- 0 關(guān)注
- 106 瀏覽
添加回答
舉報(bào)
0/150
提交
取消