Z-index

[QuietDean]

I'm having severe trouble with the z-index property.

This is an example of my code:

<img src="circle1.gif" style="z-index: 2"><img src="circle2.gif" style="z-index: 1;
position: absolute; left: +50px">

Now, according to everything I have read in books and on the Net, 'circle2' should shift over to the left, but because it has a lower z-index it should be occluded by 'circle1'.

Its not. I have tried IE5,IE5.5,IE4,NN6 and Opera 4.

Makes no odds at all.

Its really starting to annoy me. I have been trying all day to get this right. Does anyone here have any ideas?

Cheers.

------------------
QuietDean-

[HTML]

hmmmm, I cant help ya....you are my CSS guy!

[QuietDean]

Fair enough. lol.

Back to the drawing board

------------------
QuietDean-

[HTML]

Dean, If you have not yet tried this link:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/zindex.asp

[Brothercake]

The thing with z-index is that it basically only applies to absolutely positioned elements. If you want one image superimposed on top of the other, you must specify thw absolute position of <b>both</b> of them

[Brothercake]

eg:

<img src="circle1.gif" style="z-index:2; position;absolute; top:50px; left:0px"><img src="circle2.gif" style="z-index:1;
position:absolute; top:50px; left:50px">

[QuietDean]

Well I'll be ********!

It works!

Brothercake, I like you.

I did try absolute, but only on one of the elements. Dagnamit.

Also, that lying reference book I read told me relative was fine.(Sound of grinding teeth)

Cheers for that, and gratitude.

PS is your screen name a reference to Terry Pratchetts book 'Reaper man'?

[This message has been edited by Dave (edited 02-01-2001).]

[Brothercake]

I've never read any Terry Pratchett so I dunno - what's the reference?

My mates call me Cake, and I used to go by that name when I was gigging a lot, but then a tedious indie band came along with the same name and I had to find a different one. Hence, brothercake was born!

[Micowick]

Lol, I had the same problem, except for some reason, my browser worked with the position:relative. I am also using IE. The other problem I had as trying to alter the z-index with javascript

it went something like

function appear (amount)
{
var x = document.getElementById ('img')
x.style.zIndex+=amount
}

eventually I found a typo sad...