Как поправить z-index или сделать без него?
 

Можно ли сделать так (js), чтобы модальное окно было выше всех окон или уменьшало z-index всех блоков в секции на 1 при нажатии на вызов модального окна?? или как сделать по другому? (опыта мало)

Проблема в том, что для позиционирования было взято z-index, но с ним вышли проблемы. В каждом блоке свое мадальное окно.. и дпругие окна перекрывают его, т.к. в том блоке меньше z-index чем в окнах ниже.
P.S. Увеличение z-index в css модального окна.. ничего не даст, т.к. он будет только выше всех элементов именно в этом блоке, а не тех, что ниже.

var inp = document.getElementsByClassName("lightbox1");
for (var i = 0; i < inp.length; i++) {
  inp[i].onclick = function() {
    document.documentElement.style.overflow = this.checked ? "hidden" : "auto";
    document.documentElement.style.marginRight = this.checked ? "17px" : "";
    document.documentElement.style.zIndex = this.checked ? "999" : "auto";
  };
}

Ну так добавляйте свои попапы перед </body> и не будет проблем.

А как можно привязать этот кусок кода (если кинуть его сверху весь.. их там штук 12), чтобы открывалось при нажатии на кнопку/ссылку возле каждого блока? (не знаюю..)

<input type="checkbox" id="case-11" class="lightbox1"/>
<label for="case-11"> View case study</label>
    <div><div>
           <label for="case-11"></label>
               <div>
                       <div>ParkApp<label for="case-11">✖</label></div>
                       <div><img src="./images/case_study1.1.jpg" alt=""></div>
               </div>
      </div></div>