css中图像的正确重叠答案

【问题标题】：Proper overlapping of images in csscss中图像的正确重叠
【发布时间】：2016-12-09 08:50:50
【问题描述】：

我有一张图片，我想在里面重叠一张 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>

【问题讨论】：

你有sn-p / jsfiddle吗？
这可能就是你要找的东西：stackoverflow.com/questions/18235709/…
不，我没有，但我可以分享图片，

标签： javascript jquery html css

【解决方案1】：

我得到了问题的答案，任何有类似问题的人都可以通过此链接获得帮助并解决问题。我假设图像的上半部分是圆形并解决了这个问题。 https://www.codecademy.com/en/forum_questions/53261baf548c35ac9a010422

【讨论】：

【解决方案2】：

使用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

【讨论】：