I have this html css so far
<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>
this is the rendered image
![enter image description here][1]
what i wanted was to have the down arrow image to overlay on top of the image itself at the bottom right of each image.
i tried playing with top, bottom, right left but its not consistent with browsers size.
how do i change my css to have this work correctly.
Simply add
position: relative;to the list items.