html - 绝对定位未正确对齐

Question

下面的代码...

<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >

<div class="container-fluid text-cell">
   <div class="col-md-12 textr">
     <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php  the_title(); ?></a></h2>
     <?php the_category(', '); ?>
   </div>   
</div>

</article><!-- /#post -->

... 为我的 Wordpress 主题创建帖子。它使一行(100% 宽度)包含标题、类别和背景图像。每个帖子都堆叠在一起。

我希望标题和类别保留在文章的底部(我在 div 上放置了一个“textr”类，以便将它们组合在一起。

然而，该 div 现在位于它应该位于的文章顶部，而不是内部和底部

CSS

article {
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 1px solid #000;
  background-position: left center;
  height: 400px;
  margin: 0;
  padding: 0;
}

.text-cell {
  position: relative;
  margin: 0;
  padding: 0;
}

.textr{
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

Answer 1

尝试将 position: relative; 从 .text-cell 移动到 article

或

你也可以将.text-cell修改成这样:

.text-cell {
    position:absolute;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}