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

Question

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

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

我想按照下面的顺序排列div元素

(上)贴纸>架子>矩形> Canvas (下)

所以我在样式表中使用了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>

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

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

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

(上)新贴纸>新架子>新矩形>旧贴纸>旧架子>旧矩形(下)

我该如何修复这个错误。

请引用这个 fiddle ( http://jsfiddle.net/crisply/bD35Z/9/ )

Answer 1

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

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