I have self-trained myself all my website design abilities and today I am getting an issue with CSS positioning. I am attempting to give a 'Play Video' icon before my Wordpress thumbnail image. I think I have got the classes setup properly, but for whatever reason the 'Play' icon eventually ends up within the top right from the nearest div. Can everyone assist me to evaluate which I am doing wrong? I managed to get to ensure that the Wordpress inspections for several custom fields before it assigns the span "videoimg" (that ought to display icon) to ensure that only my video posts are designated the icon. Here's my Index layout in addition to my related CSS styles:

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

Here's my CSS for that elements:

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

I understand I am missing something apparent, however i can't appear to determine what it's. Here's the way the 'Play' icon is exhibiting around the page (notice what it is on top right rather than within the thumbnail image around the left-hands side):

http://i.imgur.com/5WiJI.png

I must thank all assistants ahead of time, regardless if you're able to assist me to solve this mystery.

UPDATE

Numerous friendly individuals have informed me that I have to use position:relative for my .videoimg class styling. Does anybody understand how I'd have the ability to make use of an image removed of the sprite instead of a stand alone image (to assist memory/page load occasions)? This is what I've along with a picture from the result:

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

A fast pic from the sprite in fireworks: enter image description here

..And also the result: enter image description here

Try adding position: relative; to class "featured-thumbnail"

[update] I am talking about position: relative

Try giving your .featured-thumbnail class position:relative;.

It's acting just as it will - it's being absolutely situated in mention of the its nearest non-statically situated parent. Just add position: relative; for your .featured-thumbnail div:

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

Update:

According to request, for that second a part of your condition - you should utilize negative positions for sprites. I'd suggest utilizing a tool like SpriteCow should you haven't ever done spriting by yourself before.

Update 2:

Here's your Jsfiddle, up-to-date to properly show your sprite: Updated JsFiddle

Attempt to change position:absolute to position:relative for .featured-thumbnail .videoimg.