CSS：当我附加新的 div 元素时，z-index 无法正常工作

我想实现一个关于绘制由 div 元素配置的一些矩形和贴纸的网站。

要添加贴纸或矩形，用户单击按钮。

我想按以下顺序排列 div 元素

（上）贴纸>架子>矩形>画布（下）

所以我在样式表中使用了 z-index。

#canvas {
    position: relative;
    z-index: 1;
    ...
}

.rectangle {
    position: absolute !important;
    z-index: 2 !important;
    ...
}

.rack {
    position: absolute !important;
    z-index: 3 !important;
    ...
}

.sticker { 
    position: absolute !important;
    z-index: 4 !important;
    ...
}

当元素由 html 代码分配时，它效果很好。

<div id="canvas">
    <div class="rectangle draggable resizable"
        style="left:0px; top:0px; width:200px; height:300px;"
        type="rectangle" id="rectangle_org">

        <div class="rack draggable resizable"
            style ="left: 0; top:40px; width: 50px; height: 100px;"></div>

        <div class="sticker sticker_green draggable"
            type="sticker" id="green"
            style="left:0px; top:0px;">
        </div>

        <div class="sticker sticker_yellow draggable"
            type="sticker" id="yellow"
            style="left:30px; top:0px;"></div>

        <div class="sticker sticker_red draggable"
            type="sticker" id="red"
            style="left:60px; top:0px;">
        </div>

        <div class="sticker sticker_gray draggable"
            type="sticker" id="gray"
            style="left:90px; top:0px;">
        </div>

    </div>
</div>

当我单击按钮将元素附加到画布时，它无法正常工作。

新的矩形覆盖了贴纸，即使该矩形的 z-index 低于贴纸的 z-index。

我认为这些的 z-index 如下所示

（上）新贴纸>新架子>新矩形>旧贴纸>旧架子>旧矩形（下）

我该如何修复这个错误。

请参考这个小提琴（http://jsfiddle.net/crisply/bD35Z/9/ http://jsfiddle.net/crisply/bD35Z/9/)

当你向 DOM 添加一个新元素时z-index返回到0。我还没有在其他浏览器上测试过这个，但它发生在 Chrome 中。

你必须设置z-index手动附加元素，或编写一些逻辑以自动分配z-index您的元素的值。