Javascript-форум - Позиционирование модальных окон

Доброго времени суток!
Возникла следующая ситуация:
Есть 2 раскрывающиеся блока со скрытым содержимым. В одном из них есть кнопка-картинка, нажав на которую выходит модальное окно внутри которого слайдер. На странице таких кнопок-картинок (и следовательно с разным содержимым их модальных окон) много. Суть проблемы в том, что нажав на первую картинку-кнопку модальное окно со слайдером появляется, но поверх него видно другую (рядом расположенную) картинку-кнопку.

Вот css и html: https://codepen.io/PK-1207/pen/EvdXXV

<div class="main">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    
    <label for="tab1" title="Нажмите для выбора"> <p>Раскрывающийся блок 1</p><div></div></label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Нажмите для выбора" >Раскрывающийся блок 2<div></div></label>  

<section id="content1">
<center><a class="button" href="#popup1">
<div class="img-desc">
<img src="http://xn--h1adaolkc5e.kz/uploads/8/3/5/8359-otkritki-Otkritka-kartinka-dobroe-utro-otkritka-dobroe-utro-s-dobrim-utrom-pozhelanie-dobrogo-utra-sova.jpg">
<cite><center>Подпись картинки</center></cite></div>
</a>
<div id="popup1" class="overlay">
<div class="popup">		
<a class="close" href="#">&times;</a>
<div class="content">Содержимое (слайдер)
  </center><div>





<center><a class="button2" href="#popup2">
<div class="img-desc">
<img src="https://s-media-cache-ak0.pinimg.com/originals/95/be/89/95be892d8fd579771755b5fd3db11292.jpg">
<cite><center>ФЕЕРИЯ ЦВЕТА. 2015 г.</center></cite></div>
</a>
<div id="popup2" class="overlay2">
<div class="popup2">		
<a class="close" href="#">&times;</a>
<div class="content">Содержимое (слайдер2)
      </center></div>
  
   </section>

.img-desc {
    margin-top: 50px; /* Отступ cверху */
margin-right: 50px; /* Отступ справа */
    margin-bottom: 50px; /* Отступ снизу */
   
position: relative;

display:inline-block;

height:400px;

width: 293px;

}

.img-desc cite {
    
    background: #7C4F5E;
filter:alpha(opacity=55);

font-style: normal;
opacity: .8;

color: #ffffff ;

position: absolute;
bottom: 0;

left: 0;

width: 285px;

padding: 15px;

border-top: 2px solid #999;

}
 
.button {
 
  z-index:  0.5;
  font-size: 1em;
  padding: 10px;
  color: #fff;
  float: left;
  margin-right: 3px;
   display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  cursor: pointer;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  top: 50px;

 
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 100%;
  height:600px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {

  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
 z-index:  999999;
  position: absolute;
  top: 20px;
  right: 80px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
 z-index:  999999;
  color: #06D85F;
}
.popup .content {
 top: 50px;
 width: 100%;
  height:600px;
 
 
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
.button2 {
   position:relative ;
  z-index:  -1000;
  font-size: 1em;
  padding: 10px;
  color: #fff;
  float: left;
  margin-right: 3px;
   display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button2:hover {
  cursor: pointer;
}

.overlay2 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay2:target {
  visibility: visible;
  opacity: 1;
}

.popup2 {
  top: 50px;

 
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 100%;
  height:600px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup2 h2 {

  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup2 .close {
 z-index:  999999;
  position: absolute;
  top: 20px;
  right: 80px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup2 .close:hover {
 z-index:  999999;
  color: #06D85F;
}
.popup2 .content {
 top: 50px;
 width: 100%;
  height:600px;
 
 
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup2{
    width: 70%;
  }
}

.main {
  width:100%;
  min-width:360px;
}
/* Базовый контейнер табов */
.tabs {
  width: 100%;
  padding: 0px;
  margin: 0 auto; 
  
}



/* стили вкладок (табов) */
.tabs label { 
  display: table-cell;
  width:1%;
  height:50px;
  margin: 0 0 0 -10px;
  padding: 15px 15px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  vertical-align:middle;
  color: #FFFFFF;
  background: rgb(124, 79, 94);
  background: linear-gradient(#845363, #845363) #724856;
  transition: 0.2s;
 cursor: pointer
}


/* стили для активной вкладки */
.tabs input:checked + label {

 background:linear-gradient(bottom, #a56f81, #7c4f5e);  
  background:-webkit-linear-gradient(bottom, #a56f81 5%,#7c4f5e );
 background: -moz-linear-gradient (bottom, #a56f81 5%,#7c4f5e );
 background-image: -o-linear-gradient (bottom, #a56f81 5%,#7c4f5e );
}

/* изменения стиля заголовков вкладок при наведении */
.tabs label:hover {
  color: #FFFFFF;
  cursor: pointer;
}



.tabs input:checked + label > div:after {
  content: '';
  position: absolute;
  width:0;
  height:0;
  top:80px;
  border: 15px;
  margin-left:-15px;
  border-top-color: #292929;

 }

/* активация секций с помощью переключателя :checked */ 
#tab1:checked ~ #content1, 
#tab2:checked ~ #content2, 
#tab3:checked ~ #content3, 
#tab4:checked ~ #content4 { 
display: block; 
} 

/* стили секций с содержанием */ 
section {
 margin-top: 50px; 
width:97%; /* Ширина слоя */
z-index: -10;
display: none; 
padding: 15px; 
background: #fff; 
} 
.tabs input { 
display: none; 
}