特集画像からポストタイプのタイトルをオーバーレイするにはどうすればいいですか？

Question

私はこのWP_Queryを使用して、私のポストタイプからタイトルとおすすめ画像を取得しています。

<div class="job-cont"> 
     <?php 
     $query = new WP_Query(array('post_type' => 'jobs')); 

    if ($query->have_posts()) : 

     while ($query->have_posts()) : $query->the_post(); ?> 
     <a href="<?php the_permalink(); ?>"> 
        <h1 class="the_job_title"><?php the_title(); ?></h1> 
        <img class="the_job_image" src=<?php the_post_thumbnail();?> 
       </a>  
     <?php endwhile; 

    endif; 
     ?> 
    </div> 

今、CSSを使用してスタイルを指定し、それぞれの注目画像の前にタイトルを付けることができます。しかし、position: relative;は動作しません（それぞれがそれぞれの場所を尊重します）。 By position:absolute;ポストタイプのすべてのタイトルは、ページ内の同じ場所に移動します。私はCSSを介して私は各配列の位置を呼び出すことができ、それ自身の位置を与えることができます検索したが、私はそれが不可能だと思う。

.job-cont { 
     position:relative; 
     height:40%; 
     width: 30%; 
     z-index: 1; 
    } 
    .job-cont a { 
     text-decoration: none !important; 
    } 

    .the_job_title { 
     overflow: hidden; 
     float: right; 
     z-index:3; 
    } 

    .the_job_image { 
     max-height: 100%; 
     max-width: 100%; 
     position:relative; 
     filter: brightness(72%); 
     display: inline-block; 
     z-index:2; 
    } 

多分方法がありますか？

Answer 1

絶対配置された要素を同じ相対コンテナに参照しているので、すべてのタイトルが同じ絶対位置になります。

これを試してみてください：

<div class="job-cont"> 
    <?php 
    $query = new WP_Query(array('post_type' => 'jobs')); 

if ($query->have_posts()) : 

    while ($query->have_posts()) : $query->the_post(); ?> 
    <div class="title_image_container"> 
     <a href="<?php the_permalink(); ?>"> 
       <h1 class="the_job_title"><?php the_title(); ?></h1> 
       <?php the_post_thumbnail();?> 
      </a> 
    </div> 
    <?php endwhile; 

endif; 
    ?> 
</div> 

CSS

.title_image_container {position: relative} 

したい場合は、コンテナの背景として画像を置くことができます。

この方法：

<div class="job-cont"> 
    <?php 
    $query = new WP_Query(array('post_type' => 'jobs')); 

if ($query->have_posts()) : 

    while ($query->have_posts()) : $query->the_post(); ?> 
    <div class="title_image_container" style="background:url('<?php the_post_thumbnail_url();?>') center no-repeat"> 
     <a href="<?php the_permalink(); ?>"> 
       <h1 class="the_job_title"><?php the_title(); ?></h1> 
      </a> 
    </div> 
    <?php endwhile; 

endif; 
    ?> 
</div>