Как перенести определенное накладываемое изображение на передний план

Question

Я подготовил JSFiddle here, чтобы объяснить мою проблему.

То, что я пытаюсь выполнить:

• Я делаю сетку из четырех прозрачных квадратных PNG файлов, которые плавают левых
• каждого PNG кликабелен в качестве метки для флажка
• когда поле отображается, непрозрачность PNG должна измениться, чтобы показать, что он активен
• сетчатый слой должен быть на верхней части «фонового изображения»
• «background image» загружается динамически, поэтому он не может использовать CSS
• «фоновое изображение» отдельный div с position:absolute
• пользователем щелкает на заданную площади сетки
• пользователя отправляет форму, которая содержит флажок данные (из перешедшей коробки)

Моей проблема:

• без «фонового изображения» сценарий работает, как ожидалось
• с «фоновым изображением» это STA YS на переднем плане, и когда я нажимаю он активирует само изображение, делая его полупрозрачным

Мой вопрос:

• как я привожу PNG квадратов на первый план, так что они являются интерактивными и изменения в непрозрачности, пользователь не имеет взаимодействия с «фоновым изображением»?

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'); 
    }); 
    }); 

Answer 1

Используйте z-index, чтобы помочь определить, что вы хотите, чтобы изображение было в фоновом режиме, как так:

.bg_img { 
    position:absolute; 
    z-index: -1; 
} 

Обновлено Fiddle: https://jsfiddle.net/u177yr8z/3/
Более подробную информацию о г порядка/г-индекс: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

Улучшение ваших селекторов поможет. Даже использование «label> img» предотвратит попадание фонового изображения в события кликов.

В принципе любой аргумент селектора css действителен для использования с jQuery, поэтому просто уточните, когда вы скажете ему, что вы слушаете.