Q:

How to bring a specific overlayed image to the foreground

I prepared a JSFiddle here to explain my problem.
What I'm trying to accomplish:

I am making a grid out of four transparent square PNGs that float left
each PNG is clickable as a label for a checkbox
when a box is clicked the opacity of the PNG should change to show it's active
grid layer should be on top of a "background image"
"background image" is loaded dynamically so it cannot use CSS
"background image" is a separate div with position:absolute
user clicks on a given square of the grid
user submits form that contains checkbox info (from clicked boxes)

My problem:

without the "background image" the script works as expected
with the "background image" it stays in the foreground and when I click it activates the image itself, making it semi-transparent

My question:

how do I bring the PNG squares to the foreground so they are clickable and change in opacity, the user having no interaction with the "background image"?

HTML
<div class="wrapper">
  <span>
      <label for="R0_C0">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R0_C0" value="1" class="hidden_checkbox" id="R0_C1">
  </span>
  <span>
      <label for="R0_C1">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R0_C1" value="1" class="hidden_checkbox" id="R0_C1">
  </span>
  <span>
      <label for="R1_C0">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R1_C0" value="1" class="hidden_checkbox" id="R1_C0">
  </span>
  <span>
      <label for="R1_C1">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R1_C1" value="1" class="hidden_checkbox" id="R1_C1">
  </span>
</div>

<!-- comment/remove code below this line to see the expected behavior -->

<div class="bg_img">
  <img src="http://i.stack.imgur.com/4bVu3.jpg" />
</div>

CSS
.wrapper {
  width: 64px
}

span {
  float: left
}

.hidden_checkbox {
  display: none
}

.selected_checkbox {
  opacity: 0.5;
}

.bg_img {
  position:absolute
}

JS
  $(function() {
    $('img').click(function() {
      $(this).toggleClass('selected_checkbox');
    });
  });

A:

Use z-index to help specify that you want your image to be in the background like so:
.bg_img {
    position:absolute;
    z-index: -1;
}

Updated Fiddle: https://jsfiddle.net/u177yr8z/3/ 
More information on z-order/z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

