z-index:1 not getting behind z-index:2 things

[johnyboy]

hello,

i've got an image in a div and that div has z-index:1 and is position absolutely. then there's some text and ul's in another div which is set to z-index:2. the image in the z-index:1 div is over the text and ul's that are z-index:2. how do i get the image behind the z-index:2 things?

here's the page: http://www.hdbatik.co.uk/test/index.html

the unpleasent mottled/textured image is the one that should be behind -- it's located in the right place (right on the right and 1 pixel down off the main banner) but is over laying the numerous buttons.

here's some of the main css:

#imageblock { /* what should be behind */
	margin-top: 1px;
	text-align:right;
	z-index: 1;
	right:0;
    position: absolute;
}

#imageblock img { z-index:1; }  /* what should be behind */

#imageblock h3 a {
	padding-right: 20px;
	text-align: right;
	display: block;
	color: #000;
	text-decoration: none;
	margin-top: -340px;
	z-index: 2;
}
#imageblock h3 a strong {
	display: block;
	font-size: 75%;
	margin-top: 15px;
}
#imageblock h3 a:hover { color: red; }
	
#nav { z-index: 2; }  /* what should be infront */

any suggestions much 'preciated.

[AutisticCuckoo]

The z-index depends on the stacking context. Both elements must have the same containing block for this to work. If they don't you'll need to assign the z-index to the respective containing blocks.

[johnyboy]

oh right -- i see. i'll have a go at using the same block for both things then -- thanks.

[johnyboy]

what am i still not getting? i've put both the z-index 1 and z-index 2 things in the same block -- if you were to draw a hiearchy the div#image block and other blocks (h3, ul etc) would have the same parent -- they all hang off the div#nav block. #image is z index 1 and the other things are z index 2 and the z index 2 things are still covered up by the z index 1 thing. any suggestions to what i'm doing wrong would be much appreciated thanks.

on a page: http://www.hdbatik.co.uk/test/index2.html

<div id="nav">  // the block they're all in

<div id="image"> // z-index 1
<img src="image-for-imageblock.png" alt="the #imageblock background image" />
</div>

// multiple blocks beneath have zindex 2

<h3>Maps</h3>
<ul>
	<li><a href="maps/walking/historictrail" title="A historical buildings trail">Walking Routes</a></li>
</ul>
...
...

#nav #image {
	z-index: 1;
	right:0;
	top:131px;
    position: absolute;
}

#nav ul, #nav li, #nav h3, #nav h4,
#nav ul li, #nav ul li a { z-index:2; }

[AutisticCuckoo]

The z-index property only applies to positioned elements. The elements for which you set z-index:2 don't seem to be positioned, in which case the property is ignored.

[johnyboy]

ah right, ok -- thanks for that. i'll try positioning the z index two things. i guess by "only applies to positioned elements" you mean they need positioning via relative or absolute rather than being positioned statically. ok i'll have a play with that. thanks.

[johnyboy]

ah yes excellent -- just adding position:relative; into

#nav ul, #nav li, #nav h3, #nav h4,
#nav ul li, #nav ul li a { z-index:2; position:relative;}

has done it (at least in my old safari and mac firefox): http://www.hdbatik.co.uk/test/index3.html

so that's great -- thanks very much

[johnyboy]

in fact i've now realised it was the fact that z-index only applies to positioned absolute or relative things that was the problem to start with, not the in the same block thing because they were already in the same block next to each other hierarchicaly -- in the body block.

so

#image {
	z-index: 1;
	right:0;
	top:131px;
    position: absolute;
}

#nav  { z-index:2; position:relative; }





<div id="image">
<img src="image-for-imageblock.png" alt="the #imageblock background image" />
</div>

<div id="nav">

<h3>Maps</h3>
<ul>
	<li><a href="maps/walking/historictrail" title="A historical buildings trail">Walking Routes</a></li>
</ul>

<h3>News</h3>
<ul>

http://www.hdbatik.co.uk/test/index4.html

does it. thanks

[AutisticCuckoo]

'Positioned' in CSS parlance means 'a value other that static for the position property', so it will applied for relatively positioned elements as well.