CSS: всплывающее окно скрывает другой элемент управления

Question

Я пытаюсь открыть всплывающее окно перед другим элементом управления (автозаполнение текстового поля), но отображается за элементом управления текстовым полем.

   <div id="navTarget"> 
        <ul class="menuTarget"> 
         <li><a href="#">&nbsp;</a> 
          <ul style="cursor: pointer;"> 
           <asp:Literal ID="litQuickSearchTarget" runat="server"></asp:Literal> 
          </ul> 
         </li> 
        </ul> 
       </div> 

#navTarget .menuTarget li ul { 
background: #fcecdd ; 
width: 150px; 
margin: 0; 
padding: 0; 
position: absolute; 
top: -9999px; 
left: 0; 
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40); 
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40); 
z-index: 2000; 
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40);} 

Answer 1

Вы должны играть с г-индекс:

#navTarget .menuTarget li ul { 
background: #fcecdd ; 
width: 150px; 
margin: 0; 
padding: 0; 
position: absolute; 
top: -9999px; 
left: 0; 
z-index:10; //the bigger is always in front 
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40); 
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40); 
z-index: 2000; 
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40); 
}