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

.div-about {
    position: absolute;
width: 1420px;
height: 332px;
left: calc(50% - 1420px/2 + 1px);
}
.info-about {
    font-family: Noah;
font-style: normal;
font-weight: normal;
font-size: 19px;
line-height: 99% !important;
/* or 18px */
align-items: center;
letter-spacing: 0.02em !important;
    color: #333333 !important;
}
.block-info-about1 {
width: 1420px;
height: 257px;
background: rgba(237, 231, 230, 0.7);
        display: none;
    opacity: 1;
    padding-top: 75px;
    padding-left: 0px;
    padding-right: 0px;
        color: #333333 !important;
}
.about-photo1 {
    position: absolute;
width: 324px;
height: 332px;
left: calc(50% - 324px/2 - 547px);
top: 50px;
background: #E6E5E5;
}
.about-photo1:hover .block-info-about1 {
display: block;
        color: #333333 !important;
}
.block-info-about2 {
    margin-left: -366px;
width: 1420px;
height: 243px;
background: rgba(237, 231, 230, 0.7);
        display: none;
    opacity: 1;
    padding-top: 90px;
    padding-left: 0px;
    padding-right: 0px;
        color: #333333 !important;
}
.about-photo2 {
    position: absolute;
width: 324px;
height: 332px;
left: calc(50% - 324px/2 - 182px);
top: 50px;
background: #E6E5E5;
}
.about-photo2:hover .block-info-about2 {
display: block;
        color: #333333 !important;
}
.block-info-about3 {
    margin-left: -731px;
width: 1420px;
height: 243px;
background: rgba(237, 231, 230, 0.7);
        display: none;
    opacity: 1;
    padding-top: 90px;
    padding-left: 0px;
    padding-right: 0px;
        color: #333333 !important;
}
.about-photo3 {
    position: absolute;
width: 324px;
height: 332px;
left: calc(50% - 324px/2 + 184px);
top: 50px;
background: #E6E5E5;
}
.about-photo3:hover .block-info-about3 {
display: block;
        color: #333333 !important;
}
.block-info-about4 {
    margin-left: -1096px;
width: 1420px;
height: 243px;
background: rgba(237, 231, 230, 0.7);
        display: none;
    opacity: 1;
    padding-top: 90px;
    padding-left: 0px;
    padding-right: 0px;
        color: #333333 !important;
}
.about-photo4 {
position: absolute;
width: 324px;
height: 332px;
left: calc(50% - 324px/2 + 548px);
top: 50px;
background: #E6E5E5;
}
.about-photo4:hover .block-info-about4 {
display: block;
        color: #333333 !important;
    
}

<div class="about-photo1">
<div class="block-info-about1">
<p class="info-about">Я называю себя фермером. В самом хорошем смысле. Это моя любимая работа, мой гостеприимный дом, густонаселенный счастливыми и благодарными котиками, небольшой городок с отзывчивыми и эмпатичными людьми. Для меня это еще и телестудия, и удивительное «реалити» о судьбах животных, да и о нас самих, в их контексте. Ведь Город Кошек – это и мы, это и наша жизнь. Мы создали для себя дело, которым гордимся: даем возможность себе и людям напрямую участвовать в жизни зверят.</p>
<p class="info-about">Город Кошек – совершенно точно - место для добрых людей, добрых дел и судьбоносных встреч. А ещё возможность для каждого менять свои личные и общественные стереотипы и предрассудки. Моя задача сделать так, чтобы находясь у нас и выходя из Города Кошек, человеку было чуточку теплее, чтобы каждый из нас знал: невозможное – возможно, доброе и открытое сердце – самая крепкая защита от любого натиска, что все мы не одиноки и имеем значение, как и не одиноки наши пушистые жители, пока у них есть мы с вами. Если при моём участии множество людей и животных стали счастливее – это и моё тихое, личное и большое счастье.</p>
</div>
</div>
<div class="about-photo2">
<div class="block-info-about2">
<p class="info-about">Идея открытия Города Кошек – мечта иметь своё дело. Своё – в полном смысле: родное, любимое, рождённое
и выращенное с большой ответственностью и заботой. Моя мечта сбылась. Город Кошек стал для меня местом силы.
Когда твоё дело доброе, сам становишься лучше, смелее, меняешь людей вокруг себя в лучшую сторону. Может быть, немножечко и мир.</p>
<p class="info-about">Мне нравится объединять хороших людей в их добрых порывах, видеть важные и большие результаты нашей работы, счастливых котов, встретивших свою единственную семью, трогательные истории встреч и разлук, чудесных спасений, полные надежд сердца котеек и открытые, светлые лица наших гостей, неравнодушных и высоко оценивающих то, что мы делаем – это даёт нам силы.</p>
</div>
</div>
<div class="about-photo3">
<div class="block-info-about3">
<p class="info-about">Это важная и интересная помощь. Мы всегда нуждаемся в помощи волонтёров непосредственно на площадке Города Кошек. Участие требуется разное: от протирания глазок и кормления, до помощи в поддержании порядка и, разумеется, наглаживании шерсток, приручения, возрождения доверия к человеку и взаимного мурлыкания.
Пишите нам, будем рады знакомиться.</p>
<p class="info-about">Пишите нам на online.catcity@gmail.com или в социальных сетях.</p>
</div>
</div>
<div class="about-photo4">
<div class="block-info-about4">
<p class="info-about">Если вы хотите передать нам для пристройства отловленных уличных или домашних котов, вы становитесь их полноправным куратором, несущим расходы по подготовке животных к заселению в Город Кошек. По заселении в Город Кошек и до момента их переезда в найденную семью вы продолжаете их сопровождать, оплачивая корм, наполнитель, ветеринарный контроль и поддержание порядка в помещениях. Мы предоставим схему карантинных мероприятий и поставим котейку в очередь.</p>
<p class="info-about">Подробности – в этой статье (https://vk.com/@catcity.kudrovo-gorod-koshek-prinimaet-kotov-na-pristroistvo ).
Подать заявку: online.catcity@gmail.com</p>
</div>
</div>