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仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。其他元素（您的“模式字段”）也应该定位。

自动填充列表隐藏在其他控件后面

1 个答案: