CSS Grids correct alignment - html

Question

Trying to realize the above structure in my UI. A big picture and thumbnails below it.
I am using the grid components for it. Code:
<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>
Now I want to delete pictures out of Pics. That's why I introduce badges with the following code:
<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>
And this results in the following (with a css class moving the badges in the top left corner):
.picture-thumbnail-badge{
position: relative;
top:-60px;
right:65px;
z-index: 100;
}
The Problem here is that the thumbnails are no longer centered underneath the big picture. I guess the flexbox is taking into account the size of the badge somehow.
My obvious question now: how can I ignore the badge in the alignment calculation and make this thumbnail row centered, even with badges?
Thanks in advance.

Answer 1

You need to move the .picture-thumbnail-badge out of the flow. For that, you can use position:absolute; instead of position:relative; :
.picture-thumbnail-badge{
position: absolute;
top:-60px;
right:65px;
z-index: 100;
}
(note that the parent needs to be positioned with position:relative;)