Javascript 在另一个图元上对齐图元

我在将“x”圆与图像右上角对齐时遇到了一些问题，因为它的祖父母将溢出：隐藏样式应用于它。该圆被截断，并且未放置在图像的角上

我已经花了数小时寻找正确的解决方案，但还是放弃了

我想达到这样的效果

这是我一直想做的事

angular.module（'app'，['ui.bootstrap']））
.controller（'mainCtrl'，函数（$uibModal）{
var vm=这个；
vm.existingImages=[
{img:1，src:'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
{img:2，src:'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
{img:3，src:'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{img:4，src:'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&w=1000&q=80'}，
{img:5，src:'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-画廊全屏“}，
{img:6，src:'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
];
})

。现有的img库{
最大宽度：960像素；
保证金：0自动；
文本对齐：居中；
}
.现有img缩略图{
浮动：左；
位置：相对位置；
宽度：18%；
垫底：18%；
利润率：0.83%；
溢出：隐藏；
}
.现有img集装箱{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.现有img集装箱img{
位置：绝对位置；
左：50%；
最高：50%；
身高：100%；
宽度：自动；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
i、 ion-ios-close-CYCLE.delete-img{
位置：绝对位置；
右：-5px；
z指数：1；
字号：17px；
左：95%；
最高：43%；
身高：100%；
宽度：自动；
-webkit转换：翻译（-50%，-50%）；
ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

---

我完全改变了答案。我检查了你的结构，重复的结构在我看来是重复了错误的元素

我不是角度方面的专家，但关于这一部分：

你基本上是在重复你的图像库容器6次，而这些样式并不是为这种结构设计的

您可以执行以下操作：

<div class="existing-img-gallery">
    <div ng-repeat="img in vm.existingImages" class="existing-img-thumbnail">
        <div class="existing-img-container">
            <img class="clickable" ng-src="{{this.img.src}}" alt="...">
        </div>
        <i class="ion-ios-close-circle delete-img clickable"></i>
    </div>
</div>

这样，您只有一个

。现有img库
，其中有6个
。现有img缩略图
元素。然后您只需删除
现有img缩略图的
溢出：隐藏
规则

我认为这将是结构上的一个改进，您将对样式有更多的控制。
这是我的尝试。只需移动具有溢出：隐藏的
元素


angular.module（'app'，['ui.bootstrap']））
.controller（'mainCtrl'，函数（$uibModal）{
var vm=这个；
vm.existingImages=[
{img:1，src:'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
{img:2，src:'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
{img:3，src:'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{img:4，src:'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&w=1000&q=80'}，
{img:5，src:'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-画廊全屏“}，
{img:6，src:'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
];
})
。现有的img库{
最大宽度：960像素；
保证金：0自动；
文本对齐：居中；
}
.现有img缩略图{
浮动：左；
位置：相对位置；
宽度：18%；
垫底：18%；
利润率：0.83%；
/*溢出：隐藏*/
}
.现有img集装箱{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.现有img集装箱img{
位置：绝对位置；
左：50%；
最高：50%；
身高：100%；
宽度：自动；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
i、 ion-ios-close-CYCLE.delete-img{
位置：绝对位置；
右：-5px；
z指数：1；
字号：17px；
左：95%；
最高：43%；
身高：100%；
宽度：自动；
-webkit转换：翻译（-50%，-50%）；
ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
只需将图标放在溢出隐藏容器外即可


angular.module（'app'，['ui.bootstrap']））
.controller（'mainCtrl'，函数（$uibModal）{
var vm=这个；
vm.existingImages=[
{img:1，src:'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
{img:2，src:'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
{img:3，src:'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{img:4，src:'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&w=1000&q=80'}，
{img:5，src:'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-画廊全屏“}，
{im