到目前为止我有这个 html css
<html><head><style type="text/css">
.img_list {
width: 50px;
height: 50px;
position: relative;
}
#img_list .icon {
width: 30px;
height: 30px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
li{
list-style:none;
}
</style></head>
<body>
<ul id="img_list">
<li>
<img src="images.jpg" alt="Image Title" class="img_list" />
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Chaplin</a>
</li>
<li>
<img src="images.jpg" alt="Image Title" class="img_list"/>
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Bean</a>
</li>
</ul>
</body>
</html>
这是渲染图像![在此处输入图像描述][1]
我想要的是让向下箭头图像覆盖在每个图像右下角的图像本身的顶部。我尝试使用顶部,底部,左右,但它与浏览器大小不一致。我如何更改我的 CSS 以使其正常工作。