WordPress Header: Div with shortcode on top of other Div

I’m working in the custom-header.php file of my wordpress site and I’m trying to overlay a div containing a shortcode that produces a radio player (somewhat similar to this) on top of a div that contains an image. For some reason, despite using absolute and relative positioning and z-index, I can’t seem to get it to lie on top of the image- it’s consistently behind it. This is my code in custom-header.php:

<div id="headimg">
  <div id="logo-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
    <div id="logo-player">
      <?php echo do_shortcode('[radioforge id=1]') ?>
    </div>
  </div><!-- end of #logo -->
</div>

and my CSS:

#headimg #logo-image {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#headimg #logo-image img {
    max-width: 100%;
    height: auto;
    border: none;
}

#headimg #logo-player {
  position: absolute;
  top: 50;
  left: 50;
  z-index: 10;
}

Not really sure why this isn’t producing the desired result. I’ve tried giving #logo-image a negative z-index value as well, but that changes nothing. I know my radio player is appearing behind the image because I’ve set it to autoplay when the page loads and I can hear it, but for some reason I just cannot get it to sit on top. What am I doing wrong?


Source: shortcode

Leave a Reply