Z-index is mocking me!

[Sabz]

Hey Fellas

The site in question is http://behman.com/aboutus.php

I'm trying to get the .activetri class to position its background at the very top of the stack order as to show the active page the user is one. However, the .Imgheader class wont z-index underneath it.

Ive tried ordering the divs with a stack order - doesnt work
Ive tried doing a negative z index like here;

Positioned elements paint on top of everything else if they don't have negative z-index. This means everything, including floats. This can be quite useful if, for example, you want something to paint on top of everything else, but you want a child of that item to be behind everything else. For that, you can position that element relative, with no z-index, and then position the child with a negative z-index. The first rule would paint the overlapping item above floats etc., while not creating a new stacking context. The second rule would push the child behind everything else.

the specific HTML part is

<div class="page_margins">
<div class="page">
<div class="activetri1">
<img class="Imgheader" alt="Photogallery image" src="images/About-Us.jpg">
</div>
</div>
</div>

the specific CSS part is

img.Imgheader{
position:relative; z-index:0; 
}
.activetri {
background:url("../images/menuactive.png") no-repeat scroll 64px 0px transparent;

}
.activetri1 {
background:url("../images/menuactive.png") no-repeat scroll 180px 0px transparent;
}
.activetri2 {
background:url("../images/menuactive.png") no-repeat scroll 298px 0px transparent;
}
.activetri3 {
background:url("../images/menuactive.png") no-repeat scroll 414px 0px transparent;
}
.activetri4 {
background:url("../images/menuactive.png") no-repeat scroll 528px 0px transparent;
}
.activetri5 {
background:url("../images/menuactive.png") no-repeat scroll 642px 0px transparent;
}
.activetri6 {
background:url("../images/menuactive.png") no-repeat scroll 755px 0px transparent;
}
.activetri7 {
background:url("../images/menuactive.png") no-repeat scroll 870px 0px transparent;
}
.activetri7, .activetri6, .activetri5, .activetri4, .activetri3, .activetri2, .activetri1, .activetri {
position:relative;
z-index:1;

}

Any ideas on how i can accomplish this, the funny thing is i made it work on firebug with the negative z-index trick but when i implemented; it didn't work. Thanks for the advice

[aj_nsc]

You can't have a child element appear BENEATH the BACKGROUND of it's parent. Ever. Which is what you are trying to do.

[Sabz]

You can't have a child element appear BENEATH the BACKGROUND of it's parent. Ever. Which is what you are trying to do.

ok so that means u have to change the class's of the activetri's to divs with the <img> tags nested in them... correct?

[aj_nsc]

Well, technically, what I would've done, to make it semantic, is to just use the "active" class on the current LI item in the nav to have a background image and then set the z-index of the nav higher than the z-index of the header.

[Sabz]

Well, technically, what I would've done, to make it semantic, is to just use the "active" class on the current LI item in the nav to have a background image and then set the z-index of the nav higher than the z-index of the header.

Yes thats how i originally would have coded it myself. but unfortunately the client kept changing her mind. so the HTML isn't as semantic as it could have been!

so would changing the Imgheader class to a DIV and not the IMG, then have the image nested inside, would that do the trick ?

thanks for your input sir, i recognize that there are plenty of ways to achieve the result more semantically but i need to getting working with the least amount of edits.

[aj_nsc]

Yes. Both images have to be positioned (position: relative) and the image that was the background image has a higher z-index than the header image.

Again, terrible way to do it because any img's that you have in your code should be relevant to your content (and thus add some SEO value), if not, then they should be, as you made it the first time, a background image. But I guess my stance on that has already been clear.

[Sabz]

I tried this in firebug and it didn't work either, i must be missing sthg theoretically. Any tips guys?

I'm doing this on FF 3.6 btw

<div class="page_margins">
<div class="page">
<div class="activetri1">
<div class="Imgheader" >
<img alt="Photogallery image" src="images/About-Us.jpg">
</div>
</div>
</div>
</div>

the specific CSS part is

.activetri7, .activetri6, .activetri5, .activetri4, .activetri3, .activetri2, .activetri1, .activetri {
position:relative;
z-index:250;
}
img.Imgheader{
position:relative; z-index:1; 
}
.activetri {
background:url("../images/menuactive.png") no-repeat scroll 64px 0px transparent;

}
.activetri1 {
background:url("../images/menuactive.png") no-repeat scroll 180px 0px transparent;
}
.activetri2 {
background:url("../images/menuactive.png") no-repeat scroll 298px 0px transparent;
}
.activetri3 {
background:url("../images/menuactive.png") no-repeat scroll 414px 0px transparent;
}
.activetri4 {
background:url("../images/menuactive.png") no-repeat scroll 528px 0px transparent;
}
.activetri5 {
background:url("../images/menuactive.png") no-repeat scroll 642px 0px transparent;
}
.activetri6 {
background:url("../images/menuactive.png") no-repeat scroll 755px 0px transparent;
}
.activetri7 {
background:url("../images/menuactive.png") no-repeat scroll 870px 0px transparent;
}

[aj_nsc]

My first post in this thread said:

You can't have a child element appear BENEATH the BACKGROUND of it's parent. Ever. Which is what you are trying to do.

I guess I should amend that so it says 'ancestors' instead of parent. Same rules apply - you cannot have a child element appear BENEATH a BACKGROUND image/color/gradient of any of it's ancestors. We'll call the background element the z-index limit - if an element has a background, every descendent element will ALWAYS appear above the background.

You're z-index rules aren't making any sense.

This is what I was referring to that you COULD do (although I highly discourage it)

<div class="activetri1">
<img src="thebackgroundimage of activetri1" style="position: absolute; z-index: 2;">
<img alt="Photogallery image" src="images/About-Us.jpg" style="position: relative; z-index: 1;">
</div>

That way you have elements positioned - the first absolutely so it doesn't interfere with where you ImgHeader falls in your document - and you are using z-indicies that have relevance to each other because they are on sibling, positioned elements.