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

Home Forums CSS Yep. Another z-index problem thread.

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #23821

    Well, guys. I thought I had z-index all figured out. Apparently not. Here’s the page: … /index.php

    This might get a little complex, so bear with me.

    Right now I’m using a jquery cycle plugin to fade between 4 different images. What I want to do is get the div id "coverback" on top of the div id "cover". You may be thinking, "But if you do that you won’t be able to see the pictures!" Yes, well I’m planning on replacing the background in "coverback" with a png with a hole in it.

    Anyway, the id’s "cover", "coverback", and the class "pics" and "pics img" all have relative positioning. "coverback" has a z-index of 10, and "cover", "pics" and "pics img" have a z-index of 5. If I understand it right, coverback should now be on top of everything with a lower z-index, correct?

    Unfortunately, that’s not what is happening. Here’s the snippet of the HTML:


    And the CSS:

    #coverback {background-image: url(images/slide_back.png); width:660px; height:228px; min-height:228px; margin-bottom: -50px; position:relative; left:-21px; top:-44px; z-index: 10}
    #cover {position:relative; margin-top:45px; left:10px; top:10px; z-index: 5}
    .pics { height: 210px; width: 635px; padding:0; margin:0; overflow: hidden; position: relative; z-index: 5 }
    .pics img { height: 200px; width: 625px; padding: 5px; border: 1px solid #ccc; background-color: #eee; top:0; left:0; position: relative; z-index: 5 }

    It’s these little things that make me pull my hair out.

    Thanks guys.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.