Bengemin Uy Bengemin Uy - 7 months ago 11
HTML Question

Multiple Images in One LI in HTML

I want this code to show as the two images being on top of each other. Outside li, it works, like the two images are on top of each other. But when I put it inside the li, it doesn't work anymore. Only the itemframe image appears but the 0 img doesn't appear. Please help. I need to use li because I am currently using a jquery file known as Sly. By the way the code for this is such



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>





Any tips or answers on how to make this work? Thank you for your time reading this question too.

Answer

Comments in comments.

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>

Comments