爲什麼appendChild會忽略zIndex？

我有非常奇怪的情況，我將孩子（縮略圖）附加到一個div，然後我添加一個大的阻塞div到父div（所有使用appendChild），並沒有任何理由，我可以看到拇指div顯示顯示阻塞DIV（即使在元素督察以上，他們是在正確的節點層次爲什麼appendChild會忽略zIndex？

要清楚

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

但是t他的拇指出現在阻擋者的上方。我沒有在任何設置上設置zIndex。拇指被設置爲顯示：inline-block;有沒有一些明顯的原因，他們爲什麼不會在阻擋者後面？

2012-03-20 Genia S.

您是否意識到您的示例HTML充滿了錯誤？ Div標籤沒有關閉，在沒有放置隨機字符串的地方，您有像'thumb'和'blocker'這樣的隨機字符串。如果這是您的實際HTML，那麼在您擁有合法HTML之前，所有投注都將關閉。 – jfriend00 2012-03-20 05:25:23

哈哈......是的，當然，這只是我正在做的結構的示範。 – 2012-03-20 05:54:52

除非你用CSS操縱對象以某種方式重疊，否則按順序排列對象以避免重疊。你的拇指出現在HTML中的阻擋div之前，因此它們應該被佈置並且在阻擋div之前在頁面中指定一個位置，這聽起來像是你所看到的。這是預期的行爲。

如果你想在頁面中的大拇指之前的塊div，把它放在你的HTML（或使用浮點數或位置：絕對）拇指之前。

如果你想在大拇指頂部設置阻擋器div，你需要製作容器position: relative並製作阻擋器position: absolute，並給它一個合適的z-index以獲得最佳效果。

下面是一個例子，確定攔截器div的大拇指：http://jsfiddle.net/jfriend00/cxkmp/。我已經把它定位在一部分上，這樣你就可以看到它是如何遮擋背後的拇指。

僅供參考：您的示例HTML沒有正確關閉div標籤，因此您的真實HTML就是這種方式，這也會導致大量混淆。

FYI：z-index適用於非position:static（例如最常見的position: absolute）的對象。對象position:static以子順序顯示，不考慮z-index。

2012-03-20 01:44:29 jfriend00

我是個白癡......我沒有在動態創建的div上設置ID，並且它會顯示ID（less）divs不正確。添加一個id解決了一切。我正在標記你的答案是正確的，因爲這是一個非常好的答案:) – 2012-03-20 05:56:30

沒有ID的div工作得很好。我猜你的HTML中有語法錯誤。 – jfriend00 2012-03-20 06:11:35

回答