自動完成列表隱藏在其他控件的後面

Question

在我的rails應用程序中，用戶可以添加多個模式並將多個位置分配給特定模式。該位置是一個自動填充字段。

_pattern_form.html.erb

<% f.fields_for:patterns do |builder| %> 
    <%= render 'pattern_fields', :f => builder %> 
<% end %> 

<p class="add_fields"><%= link_to_add_patterns "Add Book", f, :patterns %></p> 

_pattern_fields.html.erb

<div class="fields" style="z-index: 1;"> 

    Pattern Pub: <%= f.select(:PAT_PUB, [['A', 'A'], 
        ['B', 'B'], 
        ['C', 'C']]) %> 


    <div>  
     <% f.fields_for :location do |builder| %> 
     <%= render 'location_fields', :f => builder %> 
     <% end %> 
    </div> 

</div> 

_location_fields.html.erb

<%= f.text_field_with_auto_complete :LCN_ADJACENT_TO , { :size => 55, :style=>" z-index:100;"}, { :url => formatted_locations_path(:js), :method => :get, :skip_style => true, :param_name => 'search' } %> 

唯一的問題是，當用戶在位置自動填充字段中輸入時，自動完成列表將隱藏在其他模式字段的後面。

我創建了下面的css，並給了'auto_complete'類的z-index爲100，但徒勞無益。

.auto_complete { 
    z-index: 100; 
} 

.auto_complete ul{ 
    padding: 0px; 
    margin: 0px; 
    list-style-type:none; 
    background: #F0F8FF; 
    z-index: 100; 
} 

.auto_complete li{ 
    padding-left: 0px; 
    margin-left: 0px; 
    text-align: left; 
    z-index: 100; 

} 

任何有關如何使建議列表出現在頁面內容頂部的建議。

非常感謝您的建議。

Answer 1

z-index僅適用於定位元素（position：absolute，position：relative或position：fixed）。其他元素（你的「模式字段」）應該也可以定位。