css - DIV 内的元素位于其下方

Question

我不小心删除了我的问题。

我有以下 HTML:

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

CSS:

#frame { position: relative; z-index: 2; }
#frame img { position: relative; z-index: 1; }

我想做的是让图像的父 DIV 位于顶部(它是一个框架)。看起来 CSS 没有这样做，但为什么呢？我怎样才能使它工作？

Answer 1

自然地，子元素的堆叠顺序将高于其父元素(html 元素的子元素必须在 html 的顶部可见，等等)。

您可以通过在 img 上将 z-index 设置为 -1 来抵消这种自然行为。

编辑:为什么不能只包含其他“内容”和/或使用其他包装器？将是理想的解决方案。否则你就是在破解并试图绕过自然堆叠顺序行为，这意味着就是这样

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

编辑 #2:我猜我一直都是对的，-1 的 z-index 也有效:http://jsfiddle.net/yBH2G/1/