Absoluted positioned links on an image are not clickable

I'm stucked with a problem with z-index and stacking context. I created link absoluted positioned on a image but the links aren't clickable. If I remove position:relative;z-index:-10 in the first rule in the code my problem is resolved but in this way comes broken an other component, a menu that overlaps, and would fall under if you lifted this rule. Thus not eliminating that rule in the main, how can I resolve the problem? (In my code there are a lot of simplifications in some parts)

main[role='main'] {
  position: relative;
  /*These two rules need to avoid that when menu open is under*/
  z-index: -10;
}

#presentation-hashfood img {
  width: 100%;
}

.slide-show {
  position: relative;
}

.presentation-hashfood-title {
  position: absolute;
  display: block;
  left: 25%;
  right: 25%;
  top: 24%;
  width: 50%;
  font-size: 2em;
}

.presentation-hashfood-title svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colore-secondo);
  border-radius: 2px;
}

.presentation-hashfood-title text {
  fill: var(--colore-quarto);
}

.hashfood-span-1 {}

.hashfood-span-2 {
  font-size: 35.6px;
}

@supports (mix-blend-mode: screen) {
  .presentation-hashfood-title {
    mix-blend-mode: screen;
  }
  /* text tag svg che imposto a nero per sovrascrivere la fallback */
  .presentation-hashfood-title text {
    fill: #000;
  }
}

.slide-show-left-arrow,
.slide-show-right-arrow {
  position: absolute;
  border: .5px solid whitesmoke;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 5px;
  box-shadow: 1px 1px 5px;
  ;
  width: 2em;
  line-height: 2em;
  top: 50%;
  display: block;
  transform: translateY(-50%);
  cursor: pointer;
  color: #f5f5f5e5;
}

.slide-show-left-arrow {
  left: 2%;
}

.slide-show-right-arrow {
  right: 2%;
}

.slide-show-left-arrow::before {
  content: 'g';
}

.slide-show-right-arrow::before {
  content: 'h';
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="prova.css">
</head>
<body>
   <main role='main'>
      <section id='presentation-hashfood'>
           
         <header>
            <div class='slide-show'>
            <h2 class="presentation-hashfood-title">
               <!-- Questo codice svg serve per ottenere il typographic lock-up, una tecnica che permette al contenuto di entrare perfettamente nel suo box -->
               <svg viewBox="0 0 345 60" role="presentation">
                  <text id="presentation-hashfood-title-textcontent">
                    <!-- Put both tspan elements on same line, to prevent bug in WebKit. -->
                    <tspan class="hashfood-span-1" x="3" dy="0.8em">#FOOD IL N°1 IN ITALIA</tspan> <tspan class="hashfood-span-2" x="3" dy="0.9em">NEL FOOD DELIVERY</tspan>
                  </text>
                </svg>
                
            </h2>

            
            <picture>
               <source media="(min-width:50em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 1200px -->
               <source media="(min-width:37.5em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 800px -->
               <source media="(min-width:25em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 600px -->
               <source  srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 400px -->
               <img src='https://i.ibb.co/fqQ4tNh/img.jpg' title='Hashfood n° 1 in Italia' alt='Immagine Hashfood n° 1 in Italia'> <!-- immagine da 800px come fallback -->
            </picture>

            <a href='index.html' class='slide-show-left-arrow' aria-label='Freccia per scorrere le immagini indietro'></a>
            <a href='#' class='slide-show-right-arrow' aria-label='Freccia per scorrere le immagini avanti'></a>
         </div>
         </header> 

      </section>
      
   </main>
</body>
</html>

Solution

Just remove z-index: -10; from the .main[role='main'].

Check it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/abBZKpo

main[role='main'] {
  position: relative;
}

#presentation-hashfood img {
  width: 100%;
}

.slide-show {
  position: relative;
}

.presentation-hashfood-title {
  position: absolute;
  display: block;
  left: 25%;
  right: 25%;
  top: 24%;
  width: 50%;
  font-size: 2em;
}

.presentation-hashfood-title svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colore-secondo);
  border-radius: 2px;
}

.presentation-hashfood-title text {
  fill: var(--colore-quarto);
}

.hashfood-span-1 {}

.hashfood-span-2 {
  font-size: 35.6px;
}

@supports (mix-blend-mode: screen) {
  .presentation-hashfood-title {
    mix-blend-mode: screen;
  }
  /* text tag svg che imposto a nero per sovrascrivere la fallback */
  .presentation-hashfood-title text {
    fill: #000;
  }
}

.slide-show-left-arrow,
.slide-show-right-arrow {
  position: absolute;
  border: .5px solid whitesmoke;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 5px;
  box-shadow: 1px 1px 5px;
  ;
  width: 2em;
  line-height: 2em;
  top: 50%;
  display: block;
  transform: translateY(-50%);
  cursor: pointer;
  color: #f5f5f5e5;
}

.slide-show-left-arrow {
  left: 2%;
}

.slide-show-right-arrow {
  right: 2%;
}

.slide-show-left-arrow::before {
  content: 'g';
}

.slide-show-right-arrow::before {
  content: 'h';
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="prova.css">
</head>
<body>
   <main role='main'>
      <section id='presentation-hashfood'>
           
         <header>
            <div class='slide-show'>
            <h2 class="presentation-hashfood-title">
               <!-- Questo codice svg serve per ottenere il typographic lock-up, una tecnica che permette al contenuto di entrare perfettamente nel suo box -->
               <svg viewBox="0 0 345 60" role="presentation">
                  <text id="presentation-hashfood-title-textcontent">
                    <!-- Put both tspan elements on same line, to prevent bug in WebKit. -->
                    <tspan class="hashfood-span-1" x="3" dy="0.8em">#FOOD IL N°1 IN ITALIA</tspan> <tspan class="hashfood-span-2" x="3" dy="0.9em">NEL FOOD DELIVERY</tspan>
                  </text>
                </svg>
                
            </h2>

            
            <picture>
               <source media="(min-width:50em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 1200px -->
               <source media="(min-width:37.5em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 800px -->
               <source media="(min-width:25em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 600px -->
               <source  srcset="https://i.ibb.co/fqQ4tNh/img.jpg"> <!-- immagine da 400px -->
               <img src='https://i.ibb.co/fqQ4tNh/img.jpg' title='Hashfood n° 1 in Italia' alt='Immagine Hashfood n° 1 in Italia'> <!-- immagine da 800px come fallback -->
            </picture>

            <a href='index.html' class='slide-show-left-arrow' aria-label='Freccia per scorrere le immagini indietro'></a>
            <a href='#' class='slide-show-right-arrow' aria-label='Freccia per scorrere le immagini avanti'></a>
         </div>
         </header> 

      </section>
      
   </main>
</body>
</html>