Z-index- 1; doesn't appear in IE 7

Question

Trying to add z-index: -1; to a div class( "ie7") positioned relative. The div class lays with in an other div positioned relative. It works in any other ie browser over ie 7. Any help would be appreaciated...

<div class="category group closed">

    <div class="group_description">
        <h2>Lorem ipsum</h2>
        <span>Lorem ipsum...</span>
    </div>


    <div class="asset_link">
    <a class="video_link" href="#">
        <img class="avatar" src=""/>

        <div class="text_content">
            <div class="text-inner">
                <h3>Lorem ipsum</h3>
                <span>Lorem ipsum...</span>
            </div>  
            <h4 class="name_title">John Doe</h4>
        </div>
    </a>
    </div>



    <div class="not_available"><h1>This session is not yet available</h1></div>
</div>
</div>

CSS: 

.group_description {
    margin: 30px;
    width: 843px;
    overflow: hidden;
}


.closed {
    background: url('../images/not_available_bg.png');
    z-index:auto;
}
.closed .group_description,
.closed .asset_link {
    position: relative;
    z-index: -1;    
    *filter: alpha(opacity=40);
}

.category.group.closed .not_available {
    display:block!important;
    background: #79c7d4;
    width: 491px;
    height: 110px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -245px;
}

.category.group.closed .not_available h1 {
    color: #fff!important;
    width: inherit;
    position: absolute;
    margin-top: 40px ;
    text-align: center;
    *margin-left: 35px;  
}

.asset_link {
    margin: 0 auto 30px 30px;
    width: 407px;
    height: 116px;
    float: left;
    overflow: hidden;
}

.asset_link img.avatar {
    width: 110px;
    background: #e7e7e7 url('../images/avatar.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    float: left;
}

.asset_link .text_content {
    background: #f4f4f4;
    margin-left: 2px;
    width: 293px;
    height: 100%;
    float:left;
}

.asset_link .text-inner {
    margin: 15px;
    height: 60px;
    width: 260px;
    word-wrap: break-word;
}

h4.name_title {margin-left: 15px;font-size: 11px!important;}

Answer 1

IE 7 has a z-index reversal bug that never got fixed.

if you use jQyery you can use this to make it work properly:

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

http://vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Answer 2

I'm pretty sure this is a common bug to do with nested elements and the way ie7 actually handles the z-index attibute.

here is an article explainging it:

http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/