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的TOP上可见，等等。）

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

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

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

编辑＃2：猜猜我一直都是对的，z-index为-1也适用：http://jsfiddle.net/yBH2G/1/

Answer 2

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

Answer 3

为什么不将“框架”和图像放在div本身内。

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

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

Answer 4

您可以实现您想要的功能（可能无法在旧版浏览器中使用）：

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

请注意否定 z-index号码。这就是为什么有些浏览器存在问题，但所有现代浏览器都可以解决这个问题。

@Edit：这是一个适用于Firefox 3.6，IE8，Safari 4的测试用例（IE6＆amp; 7需要没有包含元素的位置，也就是说，它必须是position: static才能获得它工作）;

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

DIV中的元素位于其下方

4 个答案: