Layering images in CSS

I am trying to create a interface that lets you show and hide layers of the same image. I have a group of png images that I want to all occupy the same space and simply show and hid the div each layer is represented in.

When I use absolute position and z-order i still see images rendering in the incorrect order.

<img src="a.png" style="position:absolute;left:0px;top:0px;width:300px;z-order:-1" /> 
<img src="b.png" style="position:absolute;left:0px;开发者_高级运维top:0px;width:300px;z-order:1"/>
<img src="c.png" style="position:abslute;left:0px;top:0px;width:300px;z-order:1" />

In this example image always seems to cover up image b. (At least on chrome)

Maybe it's due to image load speed?

Can this be done or is it questionable design and I should be compositing the images on the server and shipping new images to the client?

thanks!

I think the problem is that you are defining z-order instead of z-index

Also, for this technique to work, z-indexes should be distinct from each other.

Unless you need to change the order of the layers, you should not need to use z-index (at the very least correct that in your code). The browser should draw the layers in the order they appear in the HTML, which means that the last image within the div will appear on top.

If you do use z-index, keep in mind that those elements with greater z-indices will appear on top of those with lesser z-indices.

Just something else to add: if you have problems with the positioning, make sure position: relative; is set on the containing div.