Css 位于其下方的DIV内的元素

我不小心删除了我的问题

我有以下HTML：

<div id="frame">
    <img src="sample.png" alt="" />
</div>

---

我想做的是将图像的父DIV放置在顶部（它是一个框架）。CSS似乎没有做到这一点，但为什么呢？我怎样才能做到这一点呢？

给父div一个设定的高度，看看会发生什么。

元素的子元素自然会比它们的父元素有更高的堆叠顺序（html元素的子元素必须在html之上可见，以此类推）

您可以通过在

img

上设置z索引-1来抵消这种自然行为

编辑：为什么你不能把另一个“内容”括起来和/或使用另一个包装器呢？这将是理想的解决方案。否则，您就是在黑客攻击，并试图绕过自然的堆叠顺序行为，也就是这样

<div id="parent">
    <div id="frame"></div>
    <div id="child"></div>
</div>

编辑#2：我想我一直都是对的，z-index为-1也可以：

为什么不把“帧”和图像放在div本身中呢

#box img, #box #frame {
    position:relative;
}
#box #frame {
    z-index: 100;
}

<div id="box">
    <div id="frame"></div>
    <img src='image.jpg' />
</div>

#盒子img，#盒子#框架{
位置：相对位置；
}
#框{
z指数：100；
}

您可以实现您想要的（在旧浏览器中可能无法工作）：

请注意负

z-索引

编号。这就是为什么有些浏览器会出现问题，但所有现代浏览器都能很好地处理这个问题

@编辑：这里有一个在Firefox 3.6、IE8、Safari 4中工作的测试用例（IE6和IE7不需要包含元素have position，也就是说，它必须是

position:static

才能工作）

示例文本

在我的原始CSS中是这样的，这只是简化的示例代码。您能给我们看完整的代码吗？如果您不想把所有内容都放在这里，请尝试jsfiddle.com。我理解这是一种理想的方式，但我想通过这种方式来解决问题——与其不回答，我不会学到任何新东西。我不同意您提到的“bug渲染引擎”，也同意您划掉的文本。现代浏览器（Firefox、IE8、Safari）都会在包含元素下方呈现负z索引，如果容器本身未定位，IE7也会呈现负z索引。

#box img, #box #frame {
    position:relative;
}
#box #frame {
    z-index: 100;
}

<div id="box">
    <div id="frame"></div>
    <img src='image.jpg' />
</div>

#frame { ... no special css (but background should be [semi-]transparent) ... }
#frame img { position: relative; z-index: -1; }

<div style="border: 5px solid red; width: 190px; height: 190px; position: relative; zoom: 1; margin: 20px">Example Text
<div style="position: absolute; z-index: -1; width: 200px; height: 200px; background-color: blue; opacity: .7; top: -10px;"></div>
</div>