css - 在单选按钮选择上叠加图像

Question

下面是来自显示属性选项的页面的代码片段。显示的代码用于通过隐藏的单选按钮选择的元素，并且要求属性图像在选择时用复选标记覆盖。虽然我在选择时有复选标记显示，但它总是在原始图像后面。我尝试过使用 z-index、不透明度以及绝对和相对定位。实现这一目标的方法是什么？我已经没有想法了。我已经查看了类似问题的多个答案，但没有一个对我有用。

<div class="attribImg">
<input type="radio" name="id[11]" value="61" checked="checked" id="attrib-11-61" />
<label class="attribsRadioButton four" for="attrib-11-61"><img src="images/attributes/18mg.png" alt="" width="50" height="50" />
</label>
<br />
</div>

使用的CSS是:

input[type="radio"] {
visibility:hidden;
}
label {
cursor: pointer;
}

.attribImg {z-index:0;}

input[type="radio"]:checked+label{
background:url(../images/checkmark.png) no-repeat 7px -20px;
}    

fiddle 是 http://jsfiddle.net/1jcz1xyn/

Answer 1

问题是由 <img> 引起的在<label>里面.不管z-index您在标签上使用， child (img) 将始终位于其父背景之上，除非您将 child 设置为 z-index: -1 (updated fiddle - 点击第二个):

.attribImg {
    position: relative; /** this is the positioning context **/
    width: 50px;
    height: 50px;
}
input {
    visibility: hidden;
}

label {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

img {
    position: relative;
    z-index: -1;
}

input[type="radio"]:checked+label {    background:url(https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/check_mark.png) no-repeat center center;
}