Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS z-index issues

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #30474
    rjmccollam
    Participant

    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!

    #78482
    noahgelman
    Participant

    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.

    #78485
    Chris Coyier
    Keymaster

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

    #78486
    noahgelman
    Participant

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

    #78506
    rjmccollam
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.