为什么appendChild会忽略zIndex

Why would appendChild disregard zIndex?

本文关键字：zIndex appendChild 为什么      更新时间：2023-09-26

我有一种非常奇怪的情况，我将子级（缩略图）附加到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。拇指被设置为显示：内联块；有没有什么明显的原因让他们不支持拦截div？

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

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

如果你想让拦截器div在拇指上，你需要让容器position: relative和拦截器position: absolute，并给它一个合适的z索引，让它在上面。

下面是一个将拦截器div放置在拇指上方的示例：http://jsfiddle.net/jfriend00/cxkmp/.我只把它放了一部分，这样你就可以看到它是如何遮住后面的大拇指的。

仅供参考：您的示例HTML没有正确关闭的div标记，所以您真正的HTML就是这样，这也可能导致巨大的混乱。

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

相关文章：