图像上的绝对定位链接不可单击

Umbert 发表于 Dev

翁伯特

我陷入了z-index和堆栈上下文的问题。我创建了绝对定位在图像上的链接，但这些链接不可单击。如果我删除position:relative;z-index:-10了代码中的第一条规则，我的问题就解决了，但是以此方式破坏了另一个组件，即菜单重叠，如果您取消此规则，该菜单将落入该菜单。因此，从根本上不消除该规则，我该如何解决该问题？（在我的代码中，某些部分有很多简化）

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>

玛纳斯·坎德尔瓦尔

只需z-index: -10;从中删除.main[role='main']。

在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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。