Question

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

要添加标签或矩形，请单击按钮。

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

（上）贴纸＆gt;架子＆gt;矩形＆gt;帆布（下）

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

（上）新贴纸＆gt;新机架＆gt;新矩形＆gt;旧贴纸＆gt;旧架子＆gt;旧矩形（下）

如何解决此错误。

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

Answer 1

为了使用z-index属性，您必须将 css 中div的位置定义为：绝对的，相对的或固定的

Answer 2

当您向DOM添加新元素时，z-index会返回0。我还没有在其他浏览器上对此进行测试，但它发生在Chrome中。

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

CSS：当我追加新的div元素时，z-index并没有正常工作

2 个答案: