z-index triggered for floated elements

I've been battling with a z-index issue on a project and one thing I have noticed that modern browsers will trigger z-index behaviour on elements that are floated, as well as elements that have position: relative or absolute. This seems to contradict the W3C spec which states:

"Applies to: elements with the 'position' property of type 'absolute' or 'relative'. "

Here's a test case:

CSS:

#tabContent{
    border:1px solid #ccc;
    padding:15px;
    margin-top:-1px;
    margin-bottom: 1.5em;
    background: #fff;
    }
p.tabHolder {
    overflow: hidden;
    height: 1%;
    margin: 14px 0 0px 0;
}
p.tabHolder a {
    display: block;
    margin:0 2px 0 0;
    padding: 6px 11px;
    float: left;
    background: #eee;
    border:1px solid #bbb;  
}
p.tabHolder a.active {
    background-color: #fff;
    border-bottom-width:0px;
    color:#333;
    padding-top: 7px;
    z-index: 100; 
}

HTML:

        <p class="tabHolder">
        <a class="active" href="#">Foo</a>
        <a href="#">Bar</a>
    </p>
    <div id="tabContent">
        <p&开发者_Python百科gt;Lorem ipsum</p>
    </div>

If you load that in IE8 and toggle the compatibility view button you will see that in IE8 the z-index works, but in IE-7 it doesn't.

Can anyone explain this?

Browsers are standards compliant to a certain extents and even vary in what specs of the standards they are compliant with. Also, browsers have certain feature sets that are unique to them, and are not part of any W3C standards.

That is why when developing for the web, you have to test on very target browser.

Maybe I've misunderstood the question, but if you replace your style rules for #tabContent with

#tabContent{
    border:1px solid #ccc;
    padding:15px;
    margin-bottom: 1.5em;
    background: #fff;
    width:80px;
    margin-top:-10px;
    z-index:50;
    float:left;
}

or

#tabContent{
    border:1px solid #ccc;
    padding:15px;
    margin-bottom: 1.5em;
    background: #fff;
    width:80px;
    margin-top:-10px;
    z-index:50;
    position:absolute;
    top:10px;
    left:20px;
}

then you will see overlapping boxes that behave as if .active doesn't have z-index, that look the same in all browsers.