CSS ie7 z 索引

发布于 2024-12-02 01:55:38 字数 742 浏览 2 评论 0原文

我正在尝试生成这样的图形：在此处输入图像描述

但我得到：

在此处输入图像描述

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>

主要问题是 html 代码需要像我上面指定的那样确定。请给我建议，我需要什么 CSS 代码来实现此功能（必须与 IE7+ 兼容）。或者也许 JS 会对此有所帮助？我很乐意提供任何建议。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生池水覆流年 2024-12-09 01:55:38

z-index CSS 属性仅与 DOM 层次结构中同一级别的元素相关。因此，红色上的 z-index 值是无关紧要的。只有蓝色和绿色的 z 索引很重要。由于蓝色的 z-index 高于绿色，因此它显示在顶部。虽然违反直觉，但它符合规范。

我没有找到不涉及静态修改 HTML 或使用 JavaScript 在运行时修改 HTML 的修复方法。例如，如果红色与蓝色和绿色出现在同一水平，则应该可以正常工作。

回复收藏 0 原文

ゃ人海孤独症 2024-12-09 01:55:38

这比你想象的要容易。如果将每个 div 嵌套在另一个 div 中，则布局会自行处理。这里有一个JSFiddle，代码如下：

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

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

回复收藏 0 原文