Trying to get DIVs to overlap correctly. Four quadrants with different, specific formatting and fifth overlaying those with the title graphic - html

Question

Ok. So, I finally have my basic layout down. It's four quadrants, each with content pushed into the opposite corners. On top of all of this, I want to layout a DIV with the title image on it. The problem is to get the content of the lower quadrants to format correctly, I had to use relative/absolute positioning. This plays havoc with the overlapping DIV, which hides behind these lower quadrants. I've tried putting absolute and relative on the main DIV, moving it in and out of other DIV's and nothing I've tried so far has worked. Maybe I'm coming at this from the wrong angle, but that's where I'm at.
You can see how it looks here:
http://anniversary.cinemasight.com/
Here's the code. This is wordpress based, so some of it may look like gibberish.
This is also contained within a single Container DIV that's not included. Further, I have my CSS in the HTML temporarily. I will move it to my stylesheet as soon as I can get everything worked out. Since this is a "live" installation, the stylesheet was archiving on the web and preventing me from seeing changes as I made them, so this was the only alternative I could get to work.
<div id="Header Image" style="margin-left:-29px;margin-top:75px;"><img src="http://anniversary.cinemasight.com/wp-content/uploads/2017/05/Banner-Test-1.png" /></div>
<div id="Header_Container" style="margin-top:-325px;">
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'academy-awards',
'posts_per_page' => 3
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Left" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">ACADEMY AWARDS<br /></span><div class="Header_Upper_Left" >
<div class="Categories_Upper_Left">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Upper_Left">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div>
</div>
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'reviews',
'posts_per_page' => 3
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Right" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">REVIEWS<br /></span><div class="Header_Upper_Right">
<div class="Categories_Upper_Right">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Upper_Right">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div>
</div>
<div id="Header_Container">
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'previews',
'posts_per_page' => 3,
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Left" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;position:relative;"><div class="Header_Section_Container" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;bottom:0;left:5px;position:absolute;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">PREVIEWS</span><div class="Header_Lower_Left">
<div class="Categories_Lower_Left">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Lower_Left">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div></div></div>
<?php
$cinemasight_header_query = new WP_Query( array(
'category_name' => 'dvd-report',
'posts_per_page' => 3,
) );
if ($cinemasight_header_query->have_posts()) :
while($cinemasight_header_query->have_posts()) :
$cinemasight_header_query->the_post();
if( 0 == $cinemasight_header_query->current_post ) :
$thumbnail_id = get_post_thumbnail_id();
$image_src = wp_get_attachment_image_src( $thumbnail_id, $size = 'full' );?>
<div class="Header_Section_Right" style="background-image: url( '<?php echo $image_src[0]; ?>');background-clip: padding-box;background-repeat: no-repeat;background-size: cover;height: 200px;position:relative;"><div class="Header_Section_Container" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;position:absolute;bottom:0;right:3px;"><span class="Category_Header_Title" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;">DVD REPORT</span><div class="Header_Lower_Right">
<div class="Categories_Lower_Right">
<?php echo the_title(); ?>
</div>
<?php continue;
endif;?>
<span class="Categories_Lower_Right">
<?php the_title(); ?><br />
</span>
<?php endwhile;
endif;
wp_reset_postdata();?>
</div>
</div>
</div>

Answer 1

You can give your title image a position: relative with a z-index: 1, That should put your title right up front.