javascript - css中图像的正确重叠

Question

我有一张图片，我想在其中重叠一张 gif 图片？ 我可以将图像添加到另一个图像中，但我希望图像应该正确添加到另一个图像中。

有什么建议吗？

我目前使用的代码是

<div style="position: relative; left: 0; top: 0;">
                            <img src="" width="225" height="140"  />
                            <img src="light bulb image" alt="member1" title="member1"
                                 style="position: relative; top: 0; left: 0;"/>
                            <img src="another gif image" style="position: absolute; top: 30px; left: 70px;"/>
                        </div>

Answer 1

使用position 和z-index 来控制图层。通常，带有position:absolute 的元素将位于父容器中其他元素的顶部，使用z-index 来控制更多层。一个例子 -

<style>
#img2{
    left:20px;
    position:absolute;
    z-index:0;
}
</style>
<div>
   <image id="img2" src="http://images.clipartpanda.com/light-bulb-clip-art-idea-light-bulb-md.png"/>
   <image  src="https://image.freepik.com/free-vector/white-canvas-background_1053-239.jpg"/>
</div>

实例 - https://jsbin.com/narakozeki/edit?html,output