自定义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。那么，你们所有的元素将会彼此回流。