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

Question

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

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

图像本身的 z-index 为 2400，而两个按钮(以及按钮的父级)的 position: 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

我真的不知道这是不是你要找的，但是，正如评论中提到的，你需要将所有元素的父元素设置为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>

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