title: Absoluted positioned links on an image are not clickable
body: <p>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 <code>position:relative;z-index:-10</code> 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)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;title&gt;Document&lt;/title&gt;
     &lt;link rel="stylesheet" href="prova.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;main role='main'&gt;
        &lt;section id='presentation-hashfood'&gt;
             
           &lt;header&gt;
              &lt;div class='slide-show'&gt;
              &lt;h2 class="presentation-hashfood-title"&gt;
                 &lt;!-- Questo codice svg serve per ottenere il typographic lock-up, una tecnica che permette al contenuto di entrare perfettamente nel suo box --&gt;
                 &lt;svg viewBox="0 0 345 60" role="presentation"&gt;
                    &lt;text id="presentation-hashfood-title-textcontent"&gt;
                      &lt;!-- Put both tspan elements on same line, to prevent bug in WebKit. --&gt;
                      &lt;tspan class="hashfood-span-1" x="3" dy="0.8em"&gt;#FOOD IL N°1 IN ITALIA&lt;/tspan&gt; &lt;tspan class="hashfood-span-2" x="3" dy="0.9em"&gt;NEL FOOD DELIVERY&lt;/tspan&gt;
                    &lt;/text&gt;
                  &lt;/svg&gt;
                  
              &lt;/h2&gt;
  
              
              &lt;picture&gt;
                 &lt;source media="(min-width:50em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"&gt; &lt;!-- immagine da 1200px --&gt;
                 &lt;source media="(min-width:37.5em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"&gt; &lt;!-- immagine da 800px --&gt;
                 &lt;source media="(min-width:25em)" srcset="https://i.ibb.co/fqQ4tNh/img.jpg"&gt; &lt;!-- immagine da 600px --&gt;
                 &lt;source  srcset="https://i.ibb.co/fqQ4tNh/img.jpg"&gt; &lt;!-- immagine da 400px --&gt;
                 &lt;img src='https://i.ibb.co/fqQ4tNh/img.jpg' title='Hashfood n° 1 in Italia' alt='Immagine Hashfood n° 1 in Italia'&gt; &lt;!-- immagine da 800px come fallback --&gt;
              &lt;/picture&gt;
  
              &lt;a href='index.html' class='slide-show-left-arrow' aria-label='Freccia per scorrere le immagini indietro'&gt;&lt;/a&gt;
              &lt;a href='#' class='slide-show-right-arrow' aria-label='Freccia per scorrere le immagini avanti'&gt;&lt;/a&gt;
           &lt;/div&gt;
           &lt;/header&gt; 
  
        &lt;/section&gt;
        
     &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>