javascript - 为什么appendChild会忽略zIndex？

Question

我有一个非常奇怪的情况，我将子项(缩略图)附加到一个div，然后我将一个大的阻塞div附加到父div(全部使用appendChild)，并且没有任何原因我可以看到拇指div结束显示在拦截器 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 。拇指正在使用 display:inline-block 设置；是否有一些明显的原因表明他们不会出现在拦截器 div 后面？

Answer 1

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

如果您希望页面中的 block 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。