problem with z-index

[dragon master mokuba]

Alright, i have a tab structure im working on, and it 'works' however the z-index isnt working.

CSS:

<style type="text/css">
/*Tab 1*/
#tabhq #tab1 {
width: 100px;
height:35px;
position: absolute;
top: -6px;
left: 50px;
z-index:10;
}
/*Tab 2*/
#tabhq #tab2 {
width: 100px;
height:35px;
position: absolute;
top: -6px;
left: 137px;
z-index:9;
}
/*Tab 3*/
#tabhq #tab3 {
width: 100px;
height:35px;
position: absolute;
top: -6px;
left: 224px;
z-index:8;
}
/*left image of tab*/
#tabhq .left {
background: url('tabs/normalleft.png') transparent;
width: 15px;
height: 30px;
}
/*center image of tab*/
#tabhq .center {
background: url('tabs/normalcenter.png') transparent;
width: 70px;
text-align: center;
line-height:35px;
font-family: Helvetica, Arial, Verdana, 'Century Schoolbook L', 'URW Bookman L';
font-size:15px;
color: #171;
height: 30px;
position:relative;
left:15px;
top:-30px;
}
/*right image of tab*/
#tabhq .right {
background: url('tabs/normalright.png') transparent;
width: 15px;
height: 30px;
position:relative;
left:85px;
top:-60px;
}
/*hover left image of tab*/
#tabhq div:hover .left {
background: url('tabs/hoverleft.png') transparent;
}
/*hover center image of tab*/
#tabhq div:hover .center {
background: url('tabs/hovercenter.png') transparent;
font-weight:bold;
line-height: 36px;
}
/*hover right image of tab*/
#tabhq div:hover .right {
background: url('tabs/hoverright.png') transparent;
}
/*active left image of tab*/
#tabhq .active .left, #tabhq .active:hover .left {
background: url('tabs/activeleft.png') transparent;
}
/*active center image of tab*/
#tabhq .active .center, #tabhq .active:hover .center {
background: url('tabs/activecenter.png') transparent;
}
/*active right image of tab*/
#tabhq .active .right, #tabhq .active:hover .right {
background: url('tabs/activeright.png') transparent;
}
/*active status of tab*/
#tabhq .active {
z-index:45;
}
</style>

HTML:

<div id="tabhq">
<div id="tab1" class="<?php if ($activeTab=='1') echo 'active'; ?>">
<div class="left">&nbsp;</div>
<div class="center"><a href="test1.php?atab=1"> Home </a></div>
<div class="right">&nbsp;</div>
</div>
<div id="tab2" class="<?php if ($activeTab=='2') echo 'active'; ?>">
<div class="left">&nbsp;</div>
<div class="center"><a href="test1.php?atab=2"> My Blog </a></div>
<div class="right">&nbsp;</div>
</div>
<div id="tab3" class="<?php if ($activeTab=='3') echo 'active'; ?>">
<div class="left">&nbsp;</div>
<div class="center"><a href="test1.php?atab=3"> Forum </a></div>
<div class="right">&nbsp;</div>
</div>

its a tab system like google chromes just upside down
the tabs are slanted and overlap which is where the z-index levels come in keeping them overlapping properly. the active tab is supposed to be on top of the tabs next to it.
the way things are set is that the z-indexes are set using tab-specific ids, and then the active tab is set using the active class. however, whenever i try and set the active class, i can get the tab to change different colors for the active status, but the tab doesnt switch to top-status. why is this happening?

[alt131]

Hi Dragonmaster,

Haven't tested this using images, but using borders, the issue seemed to be specificity.

#tabhq #tab1, #tabhq #tab2 and #tabhq #tab3 have a higher specificity than #tabhq .active. That means the higher z-index for the .active class is over-ridden by the first three rules and the .active tab is not being drawn higher in the stacking order as desired. (Put another way, the .active tab retains the z-index set by the first three rules, rather than being drawn "on top" of the other tabs sa desired.)

The specificity of the first three rules can be reduced by deleting "#tabhq". (So they become just "#tab1", "#tab2" and "#tab3".)