CSS定位问题

Question

我自学了所有的网页设计技巧，现在我遇到了CSS定位的问题。我正在尝试在Wordpress缩略图图像前添加“播放视频”图标。我认为我已经正确设置了类，但由于某种原因，“播放”图标最终位于最近的div的右上角。你能帮助我弄清楚我做错了什么吗？我做了它，以便Wordpress在分配跨度“videoimg”（应该显示图标）之前检查某些自定义字段，以便只为我的视频帖子分配图标。这是我的索引布局以及我相关的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;
}

我知道我错过了一些明显的东西，但我似乎无法弄清楚它是什么。以下是“播放”图标在页面上的显示方式（请注意它在右上方而不是在左侧的缩略图上）：

我想提前感谢所有帮助者，无论你是否能帮助我解开这个谜团。

更新

一些友好的人告诉我，我需要使用职位：亲属;对于我的.videoimg类样式。有谁知道我如何能够使用从精灵中取出的图像而不是独立的图像（以帮助内存/页面加载时间）？这是我所拥有的和结果的图片：

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

烟花精灵的快照：

..结果：

Answer 1

尝试将position: relative;添加到课程“featured-thumbnail”

[update]我的意思是职位：亲属;

Answer 2

尝试提供.featured-thumbnail课程position:relative;。

Answer 3

它的行为与应该完全一样 - 它绝对定位于最近的非静态定位父级。只需将position: relative;添加到.featured-thumbnail div：

即可

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

更新

根据要求，对于问题的第二部分 - 您需要为精灵使用负面位置。如果您以前没有做过精灵，我建议您使用像SpriteCow这样的工具。

更新2：

以下是您的Jsfiddle，已更新以正确显示您的精灵：Updated JsFiddle

Answer 4

尝试将position:absolute的{​​{1}}更改为position:relative。