html - 试图让 DIV 正确重叠。具有不同的特定格式的四个象限和第五个覆盖带有标题图形的象限

Question

好的。所以，我终于有了我的基本布局。它有四个象限，每个象限的内容都被推到相对的 Angular 落。最重要的是，我想布局一个带有标题图像的 DIV。问题是要让下象限的内容正确格式化，我不得不使用相对/绝对定位。这对隐藏在这些下象限后面的重叠 DIV 造成了严重破坏。我已经尝试将绝对和相对放在主 DIV 上，将其移入和移出其他 DIV，但到目前为止我尝试过的任何方法都没有奏效。也许我从错误的 Angular 来看待这个问题，但这就是我的立场。

你可以在这里看到它的样子: http://anniversary.cinemasight.com/

这是代码。这是基于 wordpress 的，所以其中一些看起来像是乱码。 这也包含在未包含的单个容器 DIV 中。此外，我暂时在 HTML 中有我的 CSS。我会尽快把它移到我的样式表中。由于这是一个“实时”安装，样式表在网络上存档并阻止我看到我所做的更改，所以这是我可以开始工作的唯一选择。

<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">
  <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php echo the_title(); ?></a>
</div>

  <?php continue;
endif;?>

  <span class="Categories_Upper_Left">
    <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php the_title(); ?></a><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">
  <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php echo the_title(); ?></a>
</div>

  <?php continue;
endif;?>

  <span class="Categories_Upper_Right">
    <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php the_title(); ?></a><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">
  <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php echo the_title(); ?></a>
</div>

  <?php continue;
endif;?>

  <span class="Categories_Lower_Left">
    <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php the_title(); ?></a><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">
  <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php echo the_title(); ?></a>
</div>

  <?php continue;
endif;?>

  <span class="Categories_Lower_Right">
    <a href="<?php the_permalink() ?>" style="text-shadow: -1px -1px 3px #000000, 0 0 20px #0000FF, 0 0 5px #000080;"><?php the_title(); ?></a><br />
  </span>

<?php endwhile;

endif;

wp_reset_postdata();?>
    </div>
  </div>
</div>

Answer 1

你可以给你的标题图片一个 position: relative 和一个 z-index: 1，这应该把你的标题放在最前面。