Grow your CSS skills. Land your dream job.

Yep. Another z-index problem thread.

  • # December 23, 2008 at 12:57 pm

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

    http://stuckpixelstudio.com/clients/cro … /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:

    Code:



    And the CSS:

    Code:
    #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.

    Rob
    # December 23, 2008 at 1:58 pm

    Now im not sure, but it could be because that div is used to contain the content its trying to z-index over…

    I put a div just after the </div> of your #maincontent:

    <div id="coverover"></div>

    Then just styled it to be the correct size, position relative and z-index of like 50, and it worked fine. Have a go see if it suits your needs :)

    # December 23, 2008 at 4:46 pm

    Like always, I make it harder than it should be. I just changed it to <div id="coverover"></div> and messed with some positioning to make it work.

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

You must be logged in to reply to this topic.

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