如何显示图像右上角的x框以删除它

Question

我想在图像的右上角显示x按钮，当我点击这个按钮时，图像被从database中删除。我可以用css做这个按钮

Answer 1

将x按钮和图像包裹在容器中。然后为容器提供与图像相同的宽度和高度，并将容器的位置设置为相对位置：

<div class="container">
  <img src="http://lorempixel.com/400/400" />
  <div class="x-box">
    X
  </div>
</div>

.container{
  position:relative;
  width: 400px;
  height: 400px;
}

现在，您的带有.x-box类的div可以被赋予绝对位置，并使用top:0和right:0

放置在容器的右上角

.x-box{
    position: absolute;
    top: 0;
    right: 0;
}

https://jsfiddle.net/mb5huy3h/