自定義UL LI選擇框似乎在其他HTML元素後面

Question

我真的需要你的幫助。

我似乎無法弄清楚爲什麼我的自定義UL LI選擇框出現在其他HTML元素後面。你如何解決這個問題，當用戶點擊選擇框時，它會出現在其他頁面元素的頂部？

這裏是手頭的問題的一個畫面：

下面是一個描繪所期望的結果：

小提琴：https://jsfiddle.net/1a3ux8cw/4/

這裏是有問題的CSS：

<style type="text/css"> 
* { 
    font-family: Segoe UI; 
    font-size: 9pt; 
} 
.select { 
    background: url(arrow.png) no-repeat scroll right top; 
    border: 1px solid rgb(170,170,170); 
    width: 180px; 
    padding: 3px; 
    position: absolute; 
} 
.select:hover { 
    cursor: pointer; 
    border-color: rgb(112,112,112); 
} 
.select ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    cursor: pointer; 
    position: relative; 
    background: red; 
} 
.select ul li { 
    display: none; 
    padding: 1px; 
    font-weight: normal; 
} 
.select ul li:hover { 
    background: rgb(112,146,190); 
    color: #FFF; 
} 
.selected { 
    background: rgb(195,195,195); 
} 
</style> 

HTML：

Numbers<br> 
<div class="select" id="numbers">&nbsp; 
    <ul> 
     <li>&nbsp;</li> 
     <li data-val="1234">1234</li> 
     <li data-val="5678">5678</li> 
     <li data-val="9101">9101</li> 
    </ul> 
</div> 
<br><br> 
Letters<br> 
<div class="select" id="letters">&nbsp; 
    <ul> 
     <li>&nbsp;</li> 
     <li>abcd</li> 
     <li>efgh</li> 
     <li>ijkl</li> 
    </ul> 
</div> 
<br><br> 
Fruits<br> 
<div class="select" id="fruits">&nbsp; 
    <ul> 
     <li>&nbsp;</li> 
     <li>apples</li> 
     <li>bananas</li> 
     <li>oranges</li> 
    </ul> 
</div> 

Answer 1

你的小提琴不起作用。它有錯誤。另外，這似乎是<ul>上的z-index問題。您需要將z-index分配給relative和absolute定位元素。

z-index: 999; 

Answer 2

您只需從select類中移除絕對位置，並從select> ul中移除相對位置。由於您將這些位置分配給這些元素，因此將它們移動到z-index堆棧的頂部。

埋在這些元素之下的標籤存在於這些div之外，或者更確切地說，這些select class div中的所有內容都絕對位於它們之上。你可以從CSS中刪除這些位置，然後用絕對位置將整個事物包裹一個div。那麼，你們所有的元素將會彼此迴流。