如何在图像的右上角显示删除按钮？

Question

我想在右上角显示删除按钮以显示图像？我怎么能实现这个目标？

我的HTML是这样的: -

主要形象:

<img id="' + id + '" src="../Images/DefaultPhotoMale.png" class="' + item + '" width="40" height="40" alt="image" title="' + projectTitle + '" style="cursor:pointer" />

x按钮图像显示在上方图像的右上角

• '<img id="' + item.Soid + '" src="../Images/RemoveButton.ico" style="display:none" title="Remove Specialization" />

请不要设置背景图片,我需要点击事件删除按钮,如下所示:

Answer 1

通常采用position: relative和position: absolute.

HTML:

<div class="img-wrap">
    <span class="close">&times;</span>
    <img src="http://lorempixel.com/100/80">
</div>

CSS:

.img-wrap {
    position: relative;
    ...
}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    ...
}

扩展演示(+ JS交互)http://jsfiddle.net/yHNEv/

Answer 2

在我看来，你可以设置style="position:absolute;top:0px;right:0px;"forRemoveButton.ico和style="position:relative;"for divwithimg