First thing first…you can view the issue I am talking about here
The issue is the screenshot from the iPad is overlapping the corner of the app icon. I have the iPad frame and app icon as a transparent png with a clear middle section, and the idea is to let the client interchange screenshots when they want (this is why I don’t want to use one single image). I am trying to use z-index to send the screenshot to the back so it doesn’t overlap the app icon.
You can’t have a DOM element have a lower z-index than its parent. Instead of having the the frame as a background image and the image on top of it (even though you want it under it), just have one div. Use #ipad. Just put both images in there. set #ipad to position:relative and the the frame and screen to position:absolute. Align them how you want, and THEN use z-index. That’ll work.
I just used firebug to make the adjustments, looks good. Also, if you put the frame as the second image, it’ll automatically be on top and you wont even need z-index.