z-index IE7, IE8, IE9 doesn't work?

Question

The z-index CSS property doesn't work on Internet Explorer 7, 8 and 9. How can I workaround this problem?

HTML:

<div>
    <input type="text">
    <span>label</span>
</div>

CSS:

body{background:#ddd;}
div{
    position:relative;
    width:250px;
    height:30px;
    line-height:30px;
    background:#fff;
    border:1px solid #666;
    z-index:0;
}
input{
    background:none;
    border:0;
    position:absolute;
    top:0px;
    left:0px;
    width:242px;
    height:22px;
    padding:4px;
    z-index:2;
    *line-height:30px; /* ie7 needs this */
    line-height /*\**/: 30px\9; /* ie8 needs this */
}
span{
    position:absolute;
    top:0px;
    left:4px;
    z-index:1;
}
input:focus + span{
    filter: alpha(opacity=50);
    -khtml-opacity: 0.50;
    -moz-opacity: 0.50;
    opacity: 0.50;
}

If you click on the label, the input doesn't focus

You can see what happens here: http://jsfiddle.net/YKFuZ/2/

Answer 1

I've updated your code a bit - http://jsfiddle.net/YKFuZ/6/

IE doesn't render z-index properly. So set your div 's Position to absolute. And IE doesn't support the :focus pseudo-selector. I would stick to javascript whenever IE is concerned.

EDIT: The input's parent is set to relative whereas the input element itself is set to absolute. Z-index will not be properly rendered in such a case.