如何在精选图片中叠加帖子类型标题

Question

I am using this WP_Query to get the title and the featured images from my post-types.

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

Now, with CSS wanna give styles and bring the title in front of each featured image. But position: relative; it doesn't work (each one respect each place). By position:absolute; All the titles of the post-types goes to the same place in the page. I've search if via CSS I can call each array position and give it own position, but I think that it isn't possible.

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

Maybe there is a way?

Answer 1

It happens because you are referring absolute positioned elements to the same relative container, so every title gets the same absolute position.

Try this:

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

You can also put the image as background of the container if you want.

This way:

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