Проблема позиционирования CSS

Я самоучарил все свои навыки веб-дизайна, и теперь у меня проблема с позиционированием CSS. Я пытаюсь добавить значок «Play Video» перед моим изображением миниатюры WordPress. Я думаю У меня правильно установлена ​​классы, но по какой-то причине значок «PLAY» заканчивается в правом верхнем углу ближайшего Div. Можете ли вы, ребята, помогите мне понять, что я делаю не так? Я сделал это так, чтобы WordPress проверяет определенные пользовательские поля, прежде чем он назначает SPAN «VIDEBORIMG» (который должен отображать значок), чтобы только мои видеопостки назначались значок. Вот мой макет индекса, а также моими связанные стили CSS:

 <div class="featured-thumbnail">
     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow">
          <?php the_post_thumbnail('index', array( 'title' => '' )); ?>
          <?php if (get_post_meta($post->ID, "_videoembed", true) || get_post_meta($post->ID, "_videoembed_manual", true)){ ?><?php echo('<span class="videoimg"></span>'); ?><?php } ?>
     </a>
 </div>

вот мои CSS для элементов:

.featured-thumbnail {
float: left;
margin-right: 20px;
margin-top: 5px;
z-index:2;
}

.featured-thumbnail img {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
z-index:1;
}

.featured-thumbnail img:hover{
opacity: .8;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
}

.featured-thumbnail .videoimg {
width:60px;
height:60px;
position:absolute;
z-index:6;
background: url(images/videoimg.png);
top:0;
right:0;
}

Я знаю, что я скучаю с чем-то очевидным, но я не могу выяснить, что это такое. Вот как значок «Play» отображается на странице (обратите внимание, как он находится в правом верхнем углу, а не над изображением миниатюры на левой стороне):

Я хотел бы поблагодарить всех помощников заранее, независимо от того, может помочь мне решить эту тайну.

Обновление

ряд дружеских людей сообщил мне, что мне нужно использовать позицию: родственника; для моего укладки класса .Видеоимг. Кто-нибудь знает, как я смогу использовать изображение, вынужденное из спрайта, в отличие от автономного изображения (чтобы помочь памяти / странице загрузки)? Вот что у меня есть и картина результата:

   .featured-thumbnail .videoimg {
    width:60px;
    height:60px;
    position:absolute;
    z-index:6;
    background-image: url(images/sprites_social.png);
    background-position: 32px; 0px; 
    top:0;
    right:0;
    }

Быстрая картинка спрайта в фейерверках:

.. и результат: