CSS ie7 z

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.

---

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. Eg if red appeared at the same level as blue and green it should work fine.

---

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

---

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.

链接地址: http://www.djcxy.com/p/54670.html

上一篇: 是否有可能通过WiFi在2个Android设备之间交换消息？

下一篇: CSS ie7 z