Question

我有一个非常奇怪的情况，我将孩子（缩略图）附加到div然后我将一个大的阻塞div添加到父div（所有使用appendChild）并且无缘无故我可以看到拇指divs结束显示在阻止div上方（即使在元素检查器中，它们位于正确的节点层次结构中。

要清楚。

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

但拇指出现在阻挡者上方。我没有在任何事情上设置zIndex。拇指正在设置显示：内联块;是否有一些明显的理由说明他们不会落后于阻挡者div？

Answer 1

除非您使用CSS操纵对象以某种方式重叠，否则对象按顺序排列以不重叠。您的拇指位于HTML中的阻止div之前，因此它们应该布局并在阻止div之前在页面中指定一个位置，听起来就像您所看到的那样。这是预期的行为。

如果您想在页面中的拇指之前使用块div，请将其放在HTML中的拇指之前（或使用float或position：absolute）。

如果你想在大拇指顶部使用阻挡div，你需要制作容器position: relative并制作阻挡position: absolute并给它一个合适的z-index以使其位于顶部。

这是一个将阻挡div放在拇指上的示例：http://jsfiddle.net/jfriend00/cxkmp/。我已经将它部分定位，所以你可以看到它是如何模糊背后的拇指。

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

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