为什么appendChild不理会zIndex? [英] Why would appendChild disregard zIndex?

问题描述

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

I have very odd situation where I'm appending children (thumbnails) to a div and then I append a large blocking div to the parent div (all using appendChild) and for no reason that I can see the thumb divs wind up displaying above the blocker div (even though in the element inspector, they are in the right node hierarchy.

要清楚

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

</div>

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

此过程之后，元素检查器将显示:

after this process the element inspector shows :

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

但是拇指出现在阻止程序上方.我没有在任何东西上设置zIndex.拇指设置为display:inline-block;他们为什么不在阻止者div后面有明显的原因吗?

But the thumbs appear above the blocker. I'm not setting zIndex on anything. the thumbs are being set with display:inline-block; Is there some obvious reason why they would not be behind the blocker div?

推荐答案

除非您要使用CSS处理对象以某种方式重叠，否则对象将按顺序排列而不重叠.您的拇指位于HTML中的阻止程序div之前，因此应将其布局并在页面中在阻止程序div之前的位置上分配一个听起来像您所看到的位置.这是预期的行为.

Unless you're manipulating objects with CSS to somehow overlap, objects are laid out in sequential order to not overlap. Your thumbs come before the blocker div in the HTML so they should be laid out and assigned a position in the page before the blocker div which it sounds like is what you are seeing. This is the expected behavior.

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

If you want the block div before the thumbs in the page, put it before the thumbs in your HTML (or use float or position: absolute).

如果您希望将阻止器div放在大拇指上方，则需要将容器设置为 position:relative ，并将阻止器 position:absolute 赋予其适当的z-index使其排在最前.

If you want the blocker div on top of the thumbs, you will need to make the container position: relative and make the blocker position: absolute and give it an appropriate z-index to get it on top.

以下是将阻止程序div放在大拇指上的示例: http://jsfiddle.net/jfriend00/cxkmp/.我仅将其部分定位在上面，以便您可以看到它如何遮盖住后面的拇指.

Here's an example that does position the blocker div over the thumbs: http://jsfiddle.net/jfriend00/cxkmp/. I've positioned it only partially over so you can see how it obscures the thumbs behind.

仅供参考:您的示例HTML没有正确关闭div标签，因此您的真实HTML就是这样，这也可能导致大量混乱.

FYI: Your example HTML does not have properly closed div tags so it your real HTML is that way, that can also lead to massive confusion.

仅供参考: z-index 适用于不是 position:static 的对象(例如，最常见的 position:absolute ). position:static 的对象以子顺序显示，而不考虑 z-index .

FYI: z-index applies to objects that are not position:static (e.g. most commonly position: absolute). Objects that are position:static are displayed in child order without regard to z-index.

这篇关于为什么appendChild不理会zIndex?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！