fmestamog1
New Member
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:\[code\]#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; }\[/code\]HTML:\[code\] <p class="tabHolder"> <a class="active" href="http://stackoverflow.com/questions/4105452/#">Foo</a> <a href="http://stackoverflow.com/questions/4105452/#">Bar</a> </p> <div id="tabContent"> <p>Lorem ipsum</p> </div>\[/code\]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?