我有一个帖子列表,我使用 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;
}
最佳答案
问题是您的最高值 (12%) 会根据框的高度而变化。由于这个原因,百分比值是不可靠的。相反,使用像素值或重新设计布局以使用填充或其他定位机制。
关于html - 为什么我的绝对定位元素在某些情况下放错了位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47422983/