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

绝对定位不正确对齐

1 个答案: