Why are my absolutely-positioned elements misplaced in some cases? - html

Question

I have a list of posts that I'm using ng-repeat with bootstrap grid to create seperate rows for each post. Inside of these I have a font-awesome icon bookmark with absolute positioning for text on top of that icon.They all have relative positioning to the div class='image-wrapper' that they are inside. My question is the absolute positioning of the date seems to be different visually even though the css is the same.
<div ng-repeat="post in $ctrl.posts | filter:{category:'tournament'}">
<div class="row">
<div class="col-12 col-sm-6">
<img src="{{post.photo_link}}" class='img-fluid pb-3'></img>
</div><!--End od col-sm-6-->
<div class="col-12 col-sm-6">
<div class="row">
<div class="col-12">
<h2 class='zaffre text-center h5' ng-bind="post.title"></h2>
</div><!--End of col-12-->
<div class="col-12 text-center image-wrapper">
<i class="fa fa-bookmark fa-5x zaffre" aria-hidden="true"></i>
<div class='month-wrapper'><span ng-bind="post.date | date:'MMM'"></span></div>
<div class='date-wrapper'><span ng-bind="post.date | date:'dd'"></span></div>
<p class='text-sm-left mt-2' ng-bind="post.body"></p>
</div>
</div><!--End of row-->
</div><!--End od col-sm-6-->
</div><!--End of row-->
</div><!--End of ng-repeat-->
CSS
.image-wrapper{
position:relative;
}
.month-wrapper{
position:absolute;
top:4%;
left:45%;
color:white;
}
.date-wrapper{
position:absolute;
top:12%;
left:48%;
color:white;
}

Answer 1

The problem is that your top value (12%) varies depending on the height of the box. Percentage values are unreliable for that reason. Instead, use pixel values or rework the layout to use padding or another mechanism for positioning.

Answer 2

Change the HTML structure like below:
<div class="col-12 text-center image-wrapper">
<div class='date-panel'>
<i class="fa fa-bookmark fa-5x zaffre" aria-hidden="true"></i>
<div class='month-wrapper'><span ng-bind="post.date | date:'MMM'"></span></div>
<div class='date-wrapper'><span ng-bind="post.date | date:'dd'"></span></div>
</div>
<p class='text-panel' ng-bind="post.body"></p>
</div>
Change CSS like below:
.date-panel{
position:absolute;
left:0;
top:0;
}
.text-panel{
padding-left:100px;
}