Grow your CSS skills. Land your dream job.

z-index issues

  • # October 7, 2010 at 5:42 pm

    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!

    # October 7, 2010 at 5:58 pm

    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.

    # October 7, 2010 at 6:02 pm

    Are you talking about the iTunes box? If so create a seperate image for that so it can be on top

    # October 7, 2010 at 6:05 pm

    As a side note, the reflection of the Ipad doesn’t have the music app reflected too. Should propably photoshop that in.

    # October 8, 2010 at 2:18 pm

    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!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".