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

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

如果这不是你想要的，请告诉我，所以我可以用另一种方式提供帮助。

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

1 个答案: