Question

我有一个帖子列表，我使用ng-repeat和bootstrap网格为每个帖子创建单独的行。在这些内部我有一个字体真棒图标书签，在该图标的顶部有文本的绝对定位。他们都有相对定位的div class =＆＃39; image-wrapper＆＃39;他们在里面。我的问题是即使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％）会根据盒子的高度而变化。由于这个原因，百分比值是不可靠的。相反，使用像素值或重新布局布局以使用填充或其他机制进行定位。

Answer 2

更改HTML结构，如下所示：

       <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>

更改CSS，如下所示：

.date-panel{
    position:absolute;
    left:0;
    top:0;
}
.text-panel{
    padding-left:100px;
}

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

2 个答案: