Recommendation
To enhance user experience, consider having the PayPal button initially disabled and enabling it only upon checkbox selection.
HTML (jQuery Approach)
<input type="checkbox" name="terms"
onclick="$('#paypal').removeAttr('disabled');" />
<input type="image" name="paypal" id="paypal" disabled="disabled" />
HTML (JavaScript Technique)
<input type="checkbox" name="terms"
onclick="document.getElementById('paypal').removeAttribute('disabled');" />
<input type="image" name="paypal" id="paypal" disabled="disabled" />
If you still prefer using z-index:
Note that for z-index to function properly, you must specify position: relative;. Also, negative values are not applicable for z-index.
.with_zindex {
background-color:#fafafa;
opacity: .5;
filter: alpha(opacity=50);
-moz-opacity: .5;
position: relative;
z-index:1000;
}
.with_zindex + input[type=checkbox]:checked {
position: relative;
z-index: 0;
}
The Answer You Need
HTML
<div class="with_zindex">
<input type="Checkbox" name="TOS" value="read">
<span class="catItemExtraFieldsValue">
<img src="http://gutgeordnet.de/reise/images/epaypal_de.gif">
</span>
</div>
CSS
.with_zindex {position: relative;}
.with_zindex input[type=checkbox] {
background-color:#fafafa;
filter: alpha(opacity=50);
position: absolute;
z-index: 50;
top: 10px;
left: -35px;
width: 135px;
text-align: right;
vertical-align: top;
cursor: pointer;
}
.with_zindex input[type=checkbox] + .catItemExtraFieldsValue {
position: relative;
opacity: .5;
-moz-opacity: .5;
z-index: 45;
}
.with_zindex input[type=checkbox]:after {
content: 'I accept';
font-size: 14px;
vertical-align: top;
line-height: 1em;
font-weight: bold;
font-family: tahoma;
}
.with_zindex input[type=checkbox]:checked {position: static; display: none;}
.with_zindex input[type=checkbox]:checked + .catItemExtraFieldsValue {
position: static;
background-color: transparent;
opacity: 1;
-moz-opacity: 1;
}