Wie kann ich einen post-type Titel vom vorgestellten Bild überlagern

Question

Ich benutze diese WP_Query, um den Titel und die gekennzeichneten Bilder von meinen Pfostenarten zu erhalten.

Jetzt, mit CSS wollen Stile geben und den Titel vor jedem vorgestellten Bild bringen. Aber position: relative; es funktioniert nicht (jeder für jeden Ort). By position:absolute; Alle Titel der Post-Typen gehen an die gleiche Stelle auf der Seite. Ich habe gesucht, wenn über CSS ich kann jede Array-Position aufrufen und geben Sie ihr eigene Position, aber ich denke, dass es nicht möglich ist.

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

Vielleicht gibt es einen Weg?

Answer 1

Das passiert, weil Sie absolut positionierte Elemente auf denselben relativen Container beziehen, so dass jeder Titel die gleiche absolute Position erhält.

Versuchen Sie folgendes:

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

Sie auch das Bild als Hintergrund des Behälters setzen können, wenn Sie wollen.

Auf diese Weise:

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