尽管 z-index 和相对位置，图像仍被绘制在按钮下

Question

我正在使用 html 和 jquery 将 img 定位到另一个容器中。 现在我遇到了与此类似的问题： set Z index not working. button behind a container (HTML - CSS)

唯一的问题是：那里提到的解决方案不起作用。我的图像仍然显示在按钮下方（这是一个提交类型的输入字段和一个重置类型的字段）。

图像本身的 z-index 为 2400，而两个按钮（以及按钮的父级）的位置：relative 和 z-index 为 1。

现在我的问题是那里还有哪些可用的选项？

根据要求提供附加信息（图片均为 20 x 20 像素）

var x = (pictureToWhichToPlace.left + 20).toString() + "px";
var y = (pictureToWhichToPlace.top + 20).toString() + "px";

$(document).find(".myInsertImageContainer").first().appendTo($(document).find(".subimg").first().parent());
$(document).find(".myInsertImageContainer").first().css({
    'top': y, 'left': x,  'width': 24, 'height': 24, 'z-index': 2300, 'position': 'absolute'
});

    $(document).find(".subimg").first().parent().css({ 
        'z-index': 2200, 'position': 'relative'
    });

我插入的位置是一个 div，里面有多个图像：

<div>
    <img class = "subimg" />
    <img class = "subimg" />
    <img class = "subimg" />
</div>

<div style="z-index: 1; position: relative">
    <input type="submit"> value="mysubmit" />
</div>

<div class="myInsertImageContainer">
    <img class = "myInsertImage" style="z-index: 2500; width:20;height:20 "/>
</div>

正如评论中提到的，整个页面是 nintex 表单的一部分，因此我将以上内容放在一起以尽可能接近原始情况，而不发布 10 页文本。

Answer 1

我真的不知道这是否是您要查找的内容，但是，如 cmets 中所述，您需要将所有元素的父级设置为 position:relative。 按钮和图像应具有属性 position:absolute，因此它们将相对于父 div 定位。 这样，z-index 就会起作用。

在下面的示例中，按钮位于图像下方。如果你将他的 z-index 设置为 3，它将被放置在图像上方。

#container{
    position: relative;
}
.buttons{
    position: absolute;
    z-index:1;
}
.myInsertImage{
    position: absolute;
    z-index:2;
}

<div id="container">
    <div>
        <img class = "subimg" />
        <img class = "subimg" />
        <img class = "subimg" />
    </div>
    
    <div class="buttons" >
        <input type="submit" value="mysubmit" />
    </div>
    
    <div class="myInsertImageContainer">
        <img src="http://4.bp.blogspot.com/-2exPcbRhYtA/UQNlZELLW8I/AAAAAAAAW80/xE4EeqWUyts/s1600/js.png" width="100px" height="100px" class = "myInsertImage" />
    </div>
</div>

如果这不是您要找的，请告诉我，我可以通过其他方式提供帮助。