位于DIV内部的元素

我不小心删除了我对此的问题。位于DIV内部的元素

我有以下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没有这样做，但为什么？我该如何做这项工作？

来源

2010-07-27 Benny

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

来源

2010-07-27 05:55:10 hookedonwinter

它在我原来的CSS中，这只是缩小的示例代码。 – Benny 2010-07-27 05:56:02

你能告诉我们完整的代码吗？试试jsfiddle.com，如果你不想把它放在这里。 – hookedonwinter 2010-07-27 05:56:40

-1 - http://jsfiddle.net/dC76q/ – 2010-07-27 05:59:36

元素的子元素将具有比父母更高的堆叠顺序，自然（html元素的子元素必须在html的顶部可见，依此类推）。

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

编辑：为什么你不能只附上其他“内容”和/或使用另一个包装？将是理想的解决方案。否则，你是黑客和试图去各地自然层叠顺序的行为，这是意味着要这样

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

编辑＃2：猜猜我是对的，一直以来，-1作品的z-index以及：http://jsfiddle.net/yBH2G/1/

来源

2010-07-27 05:57:55

我知道这是理想的方式，但我想要这样弄清楚 - 而不是让它不被回答，我不会学到任何新东西。 – Benny 2010-07-27 06:23:29

我不同意你提到的“越野车渲染引擎”，并同意你划掉的文本。现代浏览器（Firefox，IE8，Safari）都会在包含元素下面呈现一个负Z索引，如果容器本身没有定位，IE7也会如此。 – ScottS 2010-07-27 17:39:41

猜我是对的，然后:) – 2010-07-27 17:51:37

为什么不把“框架”和图像放入div本身。

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

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

来源

2010-07-27 08:40:10 dockeryZ

你可以达到你想要的（可能无法在旧版浏览器的工作）什么：

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

注意负z-index号。这就是为什么一些浏览器有问题，但所有现代浏览器都可以处理这个问题。这个测试用例可以在Firefox 3.6，IE8，Safari 4中运行（IE6 & 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>

来源

2010-07-27 17:25:18 ScottS

位于DIV内部的元素

回答

相关问题