title: Layering images in CSS
body: <p>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.</p>
  
  <p>When I use absolute position and z-order i still see images rendering in the incorrect order.</p>
  
  <pre><code>&lt;img src="a.png" style="position:absolute;left:0px;top:0px;width:300px;z-order:-1" /&gt; 
  &lt;img src="b.png" style="position:absolute;left:0px;top:0px;width:300px;z-order:1"/&gt;
  &lt;img src="c.png" style="position:abslute;left:0px;top:0px;width:300px;z-order:1" /&gt;
  </code></pre>
  
  <p>In this example image always seems to cover up image b. (At least on chrome)</p>
  
  <p>Maybe it's due to image load speed?</p>
  
  <p>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?</p>
  
  <p>thanks!</p>