图像上的绝对定位链接不可点击
Absoluted positioned links on an image are not clickable
我遇到了 z-index 和堆叠上下文的问题。我在图像上创建了 link absoluted，但 links 不可点击。如果我在代码的第一条规则中删除 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，并确保菜单位于此之上，确保菜单的位置不是静态的（即相对的，绝对等）。然后您应该能够增加该菜单的 z-index 以使其保持在幻灯片上方。
只需从 .main[role='main'] 中删除 z-index: -10;。
在 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>
我遇到了 z-index 和堆叠上下文的问题。我在图像上创建了 link absoluted，但 links 不可点击。如果我在代码的第一条规则中删除 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，并确保菜单位于此之上，确保菜单的位置不是静态的（即相对的，绝对等）。然后您应该能够增加该菜单的 z-index 以使其保持在幻灯片上方。
只需从 .main[role='main'] 中删除 z-index: -10;。
在 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>