CSS ie7 z-index

Question

I'am trying to generate the graphic like this:

But i get:

CSS:

 #green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; }
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; }
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;}

HTML:

<div id="blue"></div>
<div id="green">
    <div id="red"></div>
</div>

The main problem is that the html code needs to be certain like I specify above. Please give me advice what CSS code I need to implement this feature ( must be compatible with IE7+ ). Or maybe JS will help for this? I will be pleased for any advice.

Answer 1

The z-index CSS attribute is only relevant to elements that exist at the same level in the DOM hierarchy. Therefore the z-index value placed on red is irrelevant. Only the z-index on blue and green matter. As blue's z-index is higher than green's it appears on top. While counter-intuitive, it's spec compliant.

I'm not there is a fix the doesn't involve modifying the HTML, either statically or at runtime using JavaScript. E.g. if red appeared at the same level as blue and green it should work fine.

Answer 2

This is easier than you're making it out to be. If you nest each div inside another, the layout takes care of itself. There's a JSFiddle here with code below:

<div id="green">
    <div id="blue">
        <div id="red"></div>
    </div>
</div>

---

#green
{
    width: 400px;
    height: 400px;
    background: green;
    position: absolute;
}

#green #blue
{
    width: 300px;
    height: 300px;
    background: blue;
}

#green #blue #red
{
    width: 200px;
    height: 200px;
    background: red;
}

Answer 3

Removing z-index rule for green div might do the trick. The problem is that it won't work in IE7. IE8+ and others, however, should be fine.