fix0_o

Flex не подходит. Замени и посмотри.

JS

width_body = screen.width;

function benefits(evt, cityName) {
    var i, tabcontent, tablinks, width;
    tabcontent = document.getElementsByClassName("tabcontent");
    width = (tabcontent[0].offsetWidth) / 2;
    for (i = 0; i < tabcontent.length; i++) {
      
      tabcontent[i].style.transform = "translateX(-500px)";
      tabcontent[i].style.opacity = "0";
      tabcontent[i].style.left = "calc(50% - "+width+"px)";
      tabcontent[i].style.maxWidth = width_body+'px';
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  document.getElementById(cityName).style.opacity = "1";
    document.getElementById(cityName).style.transform = "translateX(0px)";
    evt.currentTarget.className += " active";
  }
  
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();

CSS
Замени только 1 класс:

.tabcontent {
  display: block;
  position:absolute;
      -webkit-transition: .6s;
      -o-transition: .6s;
      transition: .6s;
  margin:0px 30px 0px 0px;
}

Тебе нужна идея реализации.

Механизм всегда один, твоя задача скомпоновать его так, что бы у тебя получилось то, что ты хочешь. Физически слои не могут проходить сквозь друг друга (z-index(1-2)) - это механика браузеров. Но можно создать визуальный эффект, будто происходит то что ты хочешь

- "при пролистывании верхний уходит и становится как бы фоном всего, второй на передний план и третий становится вторым маленьким"

.
Для этого тебе необходимы клоны фотографий. К примеру - "

при пролистывании верхний уходит и становится как бы фоном

"
- тебе нужны 2 фото 1 уже фон но со стилем (opacity:0), другой верхний клон. При пролистывании совместно, скрываешь и растягиваешь на весь экран верхний кадр. Второй сдвигаешь и растягиваешь до размеров первого. На третьем просто проявляешь его. Те фото, что находятся в очереди и скрыты, меняешь стили (z-index(1-2)). Просто пойми рамки реализации, рендера браузера, накидай план и действуй.

Тебе в принципе понадобятся только 3 свойства:
1) z-index
2) opacity
3) transform

Я не дал тебе готового ответа, но попробовал дать представление, как это делается. Если разберешься, такие задачи будешь щелкать как орешки.

overflow-x: hidden;
overflow-y: scroll;
напомню что элементы скролла имеют фиксированную позицию и накладываются сверху.

Вот вариант.
Закрывается при клике вне области модульного окна.
Можно создавать сколько угодно модульных окон.

Пример: https://codepen.io/Fix0_o/pen/wRRVpW

<a modal-win='modal_1' href='#'>Click me</a>
<a modal-win='modal_2' href='#'>Click me</a>

<div class='modal_bg'>
  <div class='flex'>
    <div class='modal_win modal_1'>Modal window 1</div>
    <div class='modal_win modal_2'>Modal window 2</div>
  </div>
</div>

.modal_bg {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #000;
  display: none;
}
.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height:100%;
}
.modal_win {
  display: block;
  min-width: 300px;
  min-height: 300px;
  background: #fff;
  text-align: center;
  display: none;
}

$(document).on('click', "[modal-win]", function(event){
  event.preventDefault();
  var target = event.target;
  var acbut = $(target).attr('modal-win');
  $('.'+acbut).fadeIn(600);
  $('.modal_bg').fadeIn(600);
});

$(document).on('click', ".modal_bg", function(event){
  event.preventDefault();
  event.stopPropagation();
  var target = event.target;
  var check = $(target).attr('class');
  if(check == 'flex'){
    $(this).fadeOut(600);
    $('.modal_win').each(function (index, element) {
      $(element).fadeOut(600);
    });
  }
});