Проблема позиционирования 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;
}

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

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

ОБНОВЛЕНИЕ

Несколько дружелюбных людей сообщили мне, что мне нужнопозиция использования: относительная;для моего стиля .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

Попробуйте дать свой .featured-thumbnail класс position:relative;.

Answer 2

Попробуйте добавить position: relative; в класс "featured-thumbnail"

[обновить] Я имею в виду положение: относительное;

Answer 3

Попробуйте изменить position:absolute на position:relative для .featured-thumbnail .videoimg.

Answer 4

Он ведет себя точно так, как и должен - он абсолютно позиционирован относительно своего ближайшего не статически позиционированного родителя. Просто добавьте position: relative; к вашему .featured-thumbnail div:

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

Обновление:

Согласно запросу, для второй части вашей проблемы - вам нужно использовать отрицательные позиции для спрайтов. Я бы предложил использовать такой инструмент, как SpriteCow , если вы никогда раньше не делали спрайтов самостоятельно.

Обновление 2:

Вот ваш Jsfiddle, обновленный для корректного отображения вашего спрайта: Обновленный JsFiddle