html - 为什么我的绝对定位元素在某些情况下放错了位置？

Question

我有一个帖子列表，我使用 ng-repeat 和 bootstrap 网格为每个帖子创建单独的行。在这些里面，我有一个字体超棒的图标书签，该图标顶部的文本具有绝对定位。它们都相对于它们所在的 div class='image-wrapper' 具有相对定位。我的问题是日期的绝对定位在视觉上似乎有所不同，即使 css 相同。

<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

问题是您的最高值 (12%) 会根据框的高度而变化。由于这个原因，百分比值是不可靠的。相反，使用像素值或重新设计布局以使用填充或其他定位机制。