CODEWITHSUNDEEP
htmlcssinternet-explorer-7z-index
Aleksei Kornushkin
Aleksei Kornushkin

Reputation: 2279

CSS ie7 z-index

I'am trying to generate the graphic like this: enter image description here

But i get:

enter image description here

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.

Upvotes: 7

Views: 417

Answers (4)

Artyom
Artyom

Reputation: 1599

All you have to do is remove position: absolute from #green (z-index on this div also becomes unnecessary then). Works on all browsers including IE6 and IE7.

Fiddle: http://jsfiddle.net/PD83G/.

Upvotes: 0

Michael Barker
Michael Barker

Reputation: 14378

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.

Upvotes: 2

unclenorton
unclenorton

Reputation: 1625

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.

Upvotes: 1

Bojangles
Bojangles

Reputation: 101493

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;
}

Upvotes: 1

Related Questions