Liz Liz - 3 months ago 9
CSS Question

Z-Index with Bootstrap: Image Still In Front of Text

I have an instance on my site where an image should lay behind a text form, but only the labels are showing. I set the

z-index
of the appropriate divs inline (instead of using CSS) and the site overall uses
bootstrap
. The
erb
is like this:

<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 -->


And right now it is rendering like this:
Sample Image

Any ideas how to get this to display properly?

Answer

Recommend reviewing the z-index property and its requirements:

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

Specifically, z-index only functions on positioned elements (i.e. fixed, relative, absolute, static, etc).