z-index元素的不同定位？

快速的问题;如果你有2个div，一个absolutley被定位，一个亲戚，它不会做z-index，我附加了一个jsfiddle。z-index元素的不同定位？

如果我让它们都是相对的，它们会随着DOM的流向走，而另一个在y轴而不是z轴上方，任何想法？

Example JSfiddle（感谢Onheiron固定在的jsfiddle渲染）的发生了什么

截图：http://i.imgur.com/Lo37y.png，灰色的东西应该是背后的形象。

谢谢。

2012-08-08 zomboble

您的JSFiddle不会呈现。 – 2012-08-08 08:22:25

是的，我可以看看在我的OP – zomboble 2012-08-08 08:23:08

截图在这个小提琴呈现：http://jsfiddle.net/Wjw9j/2/双css声明有问题，删除#midwrap – Onheiron 2012-08-08 08:24:39

你不能让孩子出现在它的父母后面！你只能用兄弟姐妹那样做。

2012-08-08 08:26:28 Christoph

感谢您的回复，我的CSS看起来像附件;但仍然不能在浏览器中正确显示。 http://jsfiddle.net/Wjw9j/6/ – zomboble 2012-08-08 08:33:13

@zomboble请描述“不正确”。你有没有注意到，我修改了html以使其工作？你无法用你的原始标记实现。 – Christoph 2012-08-08 08:37:00

啊对不起，我看错了，谢谢你的回答:-) – zomboble 2012-08-08 08:40:50

要回答这个问题，我需要解释堆叠内容。

将z-index添加到元素时，会创建堆叠上下文。然后将所有子元素与此父级堆栈上下文进行比较。

您的元素“slideImg”的z-index为1000.然后在此父元素的堆叠上下文中比较任何子元素。因此，“shadow”的z-index为0，实际上是“1000 + 0”，因为它位于“slideImg”的堆叠上下文中。

为了把“影子”的背后“slideImg”你能扭转他们的嵌套：

<div id="shadow">  
      <div id="slideImg"></div>  
    </div>

或者把它们彼此相邻，因此它们在同一个堆叠上下文中的每个考虑。

<div id="shadow"></div> 
    <div id="slideImg"></div>

2012-08-08 08:35:28 Fenton

回答