HTML 一里多图

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

    li
    {
      background-color: "#f00";
      width: 100%;
    }   

    img.shopitemframe{
        display: block;
    }
    
    img.itemicon{
        display: block;
    }

<ul><li>
    <img class="shopitemframe" src="http://placehold.it/300x200" />
    <img class="itemicon" src="http://placehold.it/300x200" />
</li>
  </ul>

请立即检查此代码。

Answer 2

评论中的评论。

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>

Answer 3

试试这个：将位置更改为绝对位置

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

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

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

HTML 一里多图

Multiple Images in One LI in HTML

html

css

image

html-lists

试试这个：将位置更改为绝对位置