CSS / Javascript show image在mouseover / hover上删除x

Question

我想要一张如下图片：

我希望它显示在我的每个图像的右上角，从图像的右上方5px。我有显示和隐藏x以及删除相应元素的功能，但我对CSS定位非常糟糕，我不知道如何让它显示在右上角。

代码到目前为止： http://jsfiddle.net/eetwL/

Answer 1

这应该是小菜一碟！您可以定位该元素absolute，这意味着它不会与布局一起流动，而是基于它最接近的相对父级的位置来获取其位置。让我们假设你在锚中有“x”，就像这样：

<div class="container">
    <a class="close" href="#">x</a>
</div>

您可能希望确保某个地方有亲戚。这将是您应用top和right CSS规则的起点。从容器的右上角制作锚5px ...

div.container {
    position: relative;
    // possibly important to set width, height, etc.
}

a.close {
    // set size, background image, etc.
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
}

Answer 2

这是一种相对简单的方法。基本上，您可以将元素设置为position:absolute并控制其顶部，右侧，底部和左侧位置（如果其父级为position:relative;。

<div class="img">
    <img src="whatever.jpg"/>

    <img class="xmark" src="gra-x-mark-md.png"/>
</div>

<style>
.img{
    position:relative;
}
.img .xmark{
    position:absolute;
    top:5px;
    right:5px;
}
</style>