html - HTML 中的一个 LI 中的多个图像

Question

我希望此代码显示为两个图像彼此重叠。在 li 之外，它起作用了，就像两个图像彼此重叠一样。但是当我把它放在 li 里面时，它就不再起作用了。只有 itemframe 图像出现，但 0 img 没有出现。请帮忙。我需要使用 li，因为我目前正在使用一个名为 Sly 的 jquery 文件。顺便说一句，代码是这样的

img.shopitemframe{
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
}

img.itemicon{
    position: relative;
    width: 75%;
    z-index: 5;
}

<li>
    <img class="shopitemframe" src="Images/itemframe.jpg">
    <img class="itemicon" src="Images/Items/0.png">
</li>

关于如何进行这项工作的任何提示或答案？也感谢您花时间阅读这个问题。

Answer 1

评论中的评论。

W3Schools on position tag

li {
    position: relative; 
    /* It won't move but any descendant it has will be placed relative to its position. */
}

img.shopitemframe {
    width: 100%;
}

img.itemicon {
    position: absolute;
    left: 50px;
    top: 50px;
    /* Its `absolute` position will be calculated relative to `li` element position. 
       Check the link to W3Schools for more information on that. */
    width: 300px;
    z-index: 1; /* So it is on top of `.shopitemframe` */
}

<li>
    <img class="shopitemframe" src="http://i.4cdn.org/c/1458667272301.png">
    <img class="itemicon" src="http://i.4cdn.org/c/1459478128149.gif">
</li>