【问题标题】：How to make my delete buttons responsive and stay absolute on my thumbnails如何使我的删除按钮响应并在我的缩略图上保持绝对
【发布时间】：2014-08-04 20:33:21
【问题描述】：

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

图片（一）

但是，目前我的按钮看起来像这样

图片（二）

我希望我的按钮不位于图片 (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)，这意味着它不会一直放在缩略图的右上角。我该如何解决这个问题？

【问题讨论】：

你能创造一个小提琴，所以我们可以更好地帮助你..
也请添加灰色框的CSS
你可以制作灰盒的“X”孩子吗？并将其绝对定位。确保设置了灰盒的位置。
@Mujitaba Fathel 刚刚编辑了问题。

标签： html css image button responsive-design

【解决方案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;
    }
}

希望这会对你有所帮助..

【讨论】：