Помогите разобраться со ...

[chater]

Здравствуйте уважаемые форумчане. Суть проблемы - нужно чтобы при наведении на иконку соц.сети, всплывало окошко виджета этой соц сети. Это сделать получилось, но загвоздка в том, что при наведении на 1 картинку - окно всплывает на одном уровне, при наведении на вторую, третью - на другом уровне. (прилепил картинки, но там к сожалению курсор не принтанулся) Как сделать так, чтобы на одном уровне окошки всплывали?
P.S.При смене позиций - проблема остается. То есть первое по очереди окошко всплывает неправильно, остальные так как и нужно.



Вот коды:

style.css

Код HTML:

    .overlay{
  display:none;
  position: absolute;
 
}
a:hover .overlay{
    display: block;
}

Код "виджета"

Код HTML:

<div align="center"> <a href="ссылка1"> <div class="overlay"><p><script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script> <!-- VK Widget --> <div id="vk_groups"></div> <script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, width: "300", height: "400"}, 99316603);
</script></p></div><img alt="" src="http://сайт/wp-content/uploads/2016/02/vk.png" style="width: 30px; height: 30px;" /> </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="ссылка2"> <div class="overlay"><div id="ok_group_widget"></div> <script>
!function (d, id, did, st) {
  var js = d.createElement("script");
  js.src = "https://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function () {
  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
    if (!this.executed) {
      this.executed = true;
      setTimeout(function () {
        OK.CONNECT.insertGroupWidget(id,did,st);
      }, 0);
    }
  }}
  d.documentElement.appendChild(js);
}(document,"ok_group_widget","52724865761467","{width:300,height:275}");
</script></div><img alt="" src="http://сайт/wp-content/uploads/2016/03/ok-1.png" style="width: 17px; height: 30px;" /> </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="ссылка3"> <div class="overlay"><p><iframe src='/inwidget/index.php' scrolling='no' frameborder='no' style='border:none;width:260px;height:330px;overflow:hidden;'></iframe></p></div><img alt="" src="http://сайт/wp-content/uploads/2016/03/instagram-1.png" style="width: 30px; height: 30px;" /> </a></div>

Я так понимаю нужно в позиционировании первого окошка прописать значения какие-то? Но не могу понять какие. top, bottom при позиции fixed только усугубляет ситуацию (при наведении на картинку - окошко всплывает, но картинки соц.сетей не видны становятся)
Заранее благодарю за помощь

[Vlad03]

Было бы проще, если бы ссылку дали на это дело, так как по картинкам разобраться сложно. Можете в личку.

[Septik]

А если попробовать для первого элемента отступ добавить? .overlay:first-child { margin-top: Npx; } Только класс родителя еще спереди укажите.

[chater]

Septik, да, получилось. Добавил вот сюда

Код HTML:

<div id="vk_groups"></div>

margin-top, получилось

Код HTML:

<div id="vk_groups" style="margin-top: 30px;">

Теперь всё отображается верно. Единственно что, при отведении курсора в сторону, окошко не охотно прячется (курсор чуток вверх нужно сдвигать), но это из-за размера окошка скорее всего. Думаю разберусь. Благодарю за подсказку.
Я то мучал вот этот блок

Код HTML:

<div class="overlay">

, не дошло что нужно чуть ниже спуститься)