z-index not working with 2 divs with Background images

Question

I am working on an Background Ad-System and my z-index isn't working.

#page
{
    width: 1100px;
    margin: 100px 0px 0px -550px;
    min-height: 906px;
    background-color: #fff;
    left: 50%;
    cursor: auto;
    position: absolute;
    z-index: 1;
}

#adGfwADS
{
    width: 100%;
    min-height: 1050px;
    background-repeat:no-repeat;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}

See Fiddle.

(Make the right col bigger to see the image and divs better)

Possible duplicate? http://stackoverflow.com/questions/8573686/z-index-between-children-and-parents — showdev, Oct 07 '13 at 22:50
Your question is unclear, the layering appears to be working ok, do you just want to be able to see the right side of the image? If so just set decrease the `#page` width. — ᴍᴀᴛᴛ ʙᴀᴋᴇʀ, Oct 09 '13 at 08:08

score 0 · Answer 1 · answered Oct 09 '13 at 08:07

Ok.. the wrong div is up... The Code stand at jsfiddle and show at z-index.

#page
{
    width: 1100px;
    margin: 100px 0px 0px -550px;
    min-height: 906px;
    background-color: #fff;
    left: 50%;
    cursor: auto;
    position: absolute;
        z-index: 1;
}

#adGfwADS
{
    width: 100%;
    min-height: 1050px;
    background-repeat:no-repeat;
    cursor: pointer;
    position: absolute;
        z-index: 10;
    background-color: #000; background-image: url(http://crazysportz.de/1.jpg);     background-position: 50% 0px;
}

<div id="dimensions">
    <div id="adGfwADS" class="adGfwADS" url="http://google.de">
    <div id="page">blupp</div>
    </div>
</div>

The div id="page" will show but this is wrong then z-index is lower as from adGfwAds and i use position to use z-index but z-index work not =(

z-index not working with 2 divs with Background images

1 Answers1