Z-Index with Bootstrap：图像仍在文本前面

Question

我的网站上有一个实例，图片应放在文本表单后面，但只显示标签。我将相应div的z-index设置为内联（而不是使用CSS），并且网站整体使用bootstrap。 erb是这样的：

<div style="width: 100%; z-index: 0 !important">
  <%= image_tag 'background_new_recipe.jpg', style: "height: 100vh" %>
</div>

<div class="container" style="height: 500px; margin-top: -500px; z-index: 100 !important">
  <%= form_for @recipe do |f| %>
    <%= f.label "Recipe Name" %>
    <%= f.text_field :name, class: "form-control" %>

    <%= f.label "Steps to Deliciousness" %>
    <%= f.text_area :instructions, class: "form-control", style: "height: 300px" %>

    <%= f.label "This Recipe Works With:" %>

    <div class="field">
      <%= f.check_box :chicken %>
      <%= f.label "Chicken", style: "margin-left: 10px; color: red" %>
    </div>

    <div class="field">
      <%= f.check_box :beef %>
      <%= f.label "Beef", style: "margin-left: 10px; color: red" %>
    </div>

    <div class="field">
      <%= f.check_box :fish %>
      <%= f.label "Fish", style: "margin-left: 10px; color: red" %>
    </div>

    <div class="field">
      <%= f.check_box :other_meat %>
      <%= f.label "Other Types of Meat", style: "margin-left: 10px; color: red" %>
    </div>

    <div class="field">
      <%= f.check_box :veggies %>
      <%= f.label "Vegetables", style: "margin-left: 10px; color: red" %>
    </div>

    <div class="text-center"><%= f.submit "Share My Delicious Creation", action: :create, class: "btn btn-manly" %></div>
  <% end %>
</div> <!-- container -->

现在它呈现如下：

任何想法如何正确显示？

Answer 1

建议审核z-index属性及其要求：

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

具体而言，z-index仅适用于定位元素（即fixed，relative，absolute，static等。