- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
Here is the CSS that I attempted:
#ipad {background: url(images/ipadheaderbg.png) no-repeat; height: 760px; width: 570px; float: right; position: relative; z-index: 500;}
#screen {margin: 95px 0 0 98px; position: relative; z-index: 300;}
What am I missing (and is z-index the best way to achieve this)? Thanks in advance for your help!
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.
Are you talking about the iTunes box? If so create a seperate image for that so it can be on top
As a side note, the reflection of the Ipad doesn’t have the music app reflected too. Should propably photoshop that in.
Thanks @noahgelman, that makes total sense and fixed my issue. It was one of those things where I had been looking at it so long I didn’t see the obvious issue staring me in the face.
Thanks again!