javascript - 为什么 appendChild 会忽略 zIndex？

Question

我有一个非常奇怪的情况，我将子级(缩略图)附加到一个 div，然后我将一个大的阻塞 div 附加到父级 div(全部使用 appendChild)并且我无缘无故地看到缩略图 div 结束显示在 blocker 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。