CSS网格正确对齐

Question

试图在我的UI中实现上述结构。它下面有一张大图和缩略图。 我正在使用grid components。代码：

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
    </div>
</div>

现在我要删除Pics中的图片。这就是我用以下代码引入徽章的原因：

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
        <span class="badge badge-assertive picture-thumbnail-badge"
                                  on-tap="removePic($index)">
            <i class="icon ion-ios7-close-empty"></i>
        </span>
    </div>
</div>

这导致以下结果（css类在左上角移动徽章）：

.picture-thumbnail-badge{
  position: relative;
  top:-60px;
  right:65px;
  z-index: 100;
}

这里的问题是缩略图不再位于大图下面。我猜Flexbox不知怎的考虑了徽章的大小。 我现在明显的问题是：我如何忽略对齐计算中的徽章并使该缩略图行居中，即使有徽章？ 提前谢谢。

Answer 1

您需要将.picture-thumbnail-badge移出流程。为此，您可以使用position:absolute;代替position:relative;：

.picture-thumbnail-badge{
  position: absolute;
  top:-60px;
  right:65px;
  z-index: 100;
}

（请注意，父级需要定位position:relative;）