如果位置設置爲絕對位置，則無法從選擇中選擇選項？

它看起來比當我試圖設置我的phonebook的CSS position到absolute，我只是鎖定select元素。下面的相關HTML/CSS。當我從代碼中刪除position: absolute;時，它運行得非常有趣;然而，我的HTML被推下來，這是我想要避免的。如果位置設置爲絕對位置，則無法從選擇中選擇選項？

HTML

<div id="phonebook"> 
    <select id="catalog"> 
    <option value="u_none">None</option> 
    <option value="u_1">John Doe (555-555-1254)</option> 
    <option value="u_2">Jane Doe (555-555-2894)</option> 
    </select> 
    <div id="employee-info"> 
    <div id="employee-content"> 
     Role or Title<br> 
     Full Name<br> 
     Contact:<br> 
     Telephone: 555-555-5555<br> 
     Email: [email protected]<br> 
     Room: A-5555<br> 
     Mail Stop: A-555 
    </div> 
    </div> 
</div>

CSS

#phonebook { 
    position: absolute; 
    width: 320px; 
    z-index: -1; 
} 

#employee-info { 
    border: 1px solid #aaa; 
    border-top: 0 none; 
} 

#employee-content { 
    padding: 10px; 
} 

#catalog { 
    position: relative; 
    border: 1px solid #aaa; 
    width: 100%; 
    z-index: 1; 
}

我試着玩用z-index - 在一定程度上不相關的職位的建議 - 但它似乎仍然做我的不好。我需要這個元素在一個特定的部分，它很大程度上依賴於使用這個下拉select元素。

有沒有辦法解決這個問題？我不確定是什麼阻止了我訪問select下拉菜單。解釋也會很棒。

提前感謝。任何幫助表示讚賞。

來源

2015-12-02 Jacob Johnson

必須有更多，因爲當我把你的確切的代碼到一個片段，它工作正常。我發現沒有區別position: absolute;

請編輯您的問題，把代碼放入顯示問題的代碼片段（或jsfiddle）。

#phonebook { 
 
    position: absolute; 
 
    width: 320px; 
 
    z-index: -1; 
 
} 
 
#employee-info { 
 
    border: 1px solid #aaa; 
 
    border-top: 0 none; 
 
} 
 
#employee-content { 
 
    padding: 10px; 
 
} 
 
#catalog { 
 
    position: relative; 
 
    border: 1px solid #aaa; 
 
    width: 100%; 
 
    z-index: 1; 
 
}

<div id="phonebook"> 
 
    <select id="catalog"> 
 
    <option value="u_none">None</option> 
 
    <option value="u_1">John Doe (555-555-1254)</option> 
 
    <option value="u_2">Jane Doe (555-555-2894)</option> 
 
    </select> 
 
    <div id="employee-info"> 
 
    <div id="employee-content"> 
 
     Role or Title 
 
     <br>Full Name 
 
     <br>Contact: 
 
     <br>Telephone: 555-555-5555 
 
     <br>Email: [email protected] 
 
     <br>Room: A-5555 
 
     <br>Mail Stop: A-555 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-12-02 20:17:36

如果位置設置爲絕對位置，則無法從選擇中選擇選項？

回答

相關問題