为什么appendChild会忽略zIndex？

我有非常奇怪的情况，我将孩子（缩略图）附加到一个div，然后我添加一个大的阻塞div到父div（所有使用appendChild），并没有任何理由，我可以看到拇指div显示显示阻塞DIV（即使在元素督察以上，他们是在正确的节点层次为什么appendChild会忽略zIndex？

要清楚

<div id="P"> 
    <div id="thumbs"></div> 

</div> 

pseudo script: 
fill thumbs with THUMB divs ; 
P.appendChild(large blocker) ;

这个过程之后，元件检查显示：。

<div id="P"> 
    <div id="thumbs"> 
    <div thumb><div thumb>.... n number of times 
    </div> 
    <div blocker> 
</div>

但是t他的拇指出现在阻挡者的上方。我没有在任何设置上设置zIndex。拇指被设置为显示：inline-block;有没有一些明显的原因，他们为什么不会在阻挡者后面？

2012-03-20 Genia S.

您是否意识到您的示例HTML充满了错误？ Div标签没有关闭，在没有放置随机字符串的地方，您有像'thumb'和'blocker'这样的随机字符串。如果这是您的实际HTML，那么在您拥有合法HTML之前，所有投注都将关闭。 – jfriend00 2012-03-20 05:25:23

哈哈......是的，当然，这只是我正在做的结构的示范。 – 2012-03-20 05:54:52

除非你用CSS操纵对象以某种方式重叠，否则按顺序排列对象以避免重叠。你的拇指出现在HTML中的阻挡div之前，因此它们应该被布置并且在阻挡div之前在页面中指定一个位置，这听起来像是你所看到的。这是预期的行为。

如果你想在页面中的大拇指之前的块div，把它放在你的HTML（或使用浮点数或位置：绝对）拇指之前。

如果你想在大拇指顶部设置阻挡器div，你需要制作容器position: relative并制作阻挡器position: absolute，并给它一个合适的z-index以获得最佳效果。

下面是一个例子，确定拦截器div的大拇指：http://jsfiddle.net/jfriend00/cxkmp/。我已经把它定位在一部分上，这样你就可以看到它是如何遮挡背后的拇指。

仅供参考：您的示例HTML没有正确关闭div标签，因此您的真实HTML就是这种方式，这也会导致大量混淆。

FYI：z-index适用于非position:static（例如最常见的position: absolute）的对象。对象position:static以子顺序显示，不考虑z-index。

2012-03-20 01:44:29 jfriend00

我是个白痴......我没有在动态创建的div上设置ID，并且它会显示ID（less）divs不正确。添加一个id解决了一切。我正在标记你的答案是正确的，因为这是一个非常好的答案:) – 2012-03-20 05:56:30

没有ID的div工作得很好。我猜你的HTML中有语法错误。 – jfriend00 2012-03-20 06:11:35

回答