html - 如何使我的删除按钮响应并在我的缩略图上保持绝对

Question

我有一个应用程序，用户可以通过单击缩略图右上角的按钮来上传和删除图像，如下所示

图片(1)

但是，目前我的按钮是这样的

图片(2)

我不希望我的按钮位于图片旁边，如图 (2) 所示，而是看起来像图片 (1) 并且即使在我更改窗口大小时也保持原样。

我现在的CSS

 @media (max-width: 768px) {
  .delete {
    cursor: pointer !important; 
   font-size: 30px;
   position: absolute;
   color: white;
   border: none;
   background: none;
   right: 18px;
   top: -9px;
   line-height: 1;
  }
  .delete span {
    height: 30px;
    width:30px;
    background-color: black;
    border-radius: 50%;
    display: block;
  }
 }

 .model-thumbs img {
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;
   box-shadow: 0 0 5px 2px rgba(0,0,0,.15);
 }

我当前的 html

<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 model-thumbs" ng-repeat="model in models track by $index" ng-animate="'animate'">
 <button type="button" class="delete" ng-click="deleteModel(model)">
      <span>&times;</span>
      <span class="sr-only">Delete</span>
 </button>

 <img ng-click="selectModel(model)" src="{{model.thumbSrc}}" class="img-responsive" data-toggle="modal" data-target="#detailModal">
</div>

正如您目前看到的，我正在尝试使用 @media 标签，但是当我调整窗口大小时，它从图片 (2) 移动到下面的这张图片

以流动的方式移动到图片(1)，意思是，它不会停留在缩略图的右上角。我该如何解决这个问题？

Answer 1

Demo ... Source

HTML

<div class="box">
    <button type="button" class="delete" ng-click="deleteModel(model)">
        <span>&times;</span>
    </button>
    <div class="image">
        <img ng-click="selectModel(model)" src="http://nemo-crack.org/uploads/posts/2014-04/1398165049_adobe-410x400.png" />
    </div>
</div>

CSS

.delete {
    cursor: pointer !important;
    font-size: 30px;
    position: absolute;
    color: white;
    border: none;
    background: none;
    right: -15px;
    top: -15px;
    line-height: 1;
    z-index: 99;
    padding: 0;
}
.delete span {
    height: 30px;
    width: 30px;
    background-color: black;
    border-radius: 50%;
    display: block;
}

.box{
    width: calc((100% - 30px) * 0.333);
    margin: 5px;
    height: 250px;
    background: #CCCCCC;
    float: left;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 5px 2px rgba(0,0,0,.15);
}

.box:hover{
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.5);
}

.box .image{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.box .image img{
    width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

@media (max-width: 600px) {
    .box{
        width: calc((100% - 20px) * 0.5);
        height: 200px;
    }
}

希望这对你有帮助..