需要帮助理解嵌套元素的 z-index

Question

我需要帮助来理解元素的 z-index 是如何受到嵌套或不嵌套元素的影响的。我已经设法让我的代码正常工作（它应该有一个可点击的图像（将用户重定向到其他页面/部分的图像），当悬停时应该在图像上显示一个叠加层。

然而，当我更改 html 代码时，叠加层显示不同：（移动我将结束标记从第 2 行移动到第 4 行，叠加层不再正确显示，我不明白为什么）

原件：（部分工作代码，按预期叠加显示在图像顶部）

<div class="image">
    <a href="www.google.com" class="image__link"></a>
         <img class="image__img" src="https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg" />
     

移动关闭锚标签后：（不能正常工作，图像显示在叠加层之上并且叠加层不可见）

 <div class="image">
     <a href="www.google.com" class="image__link">
         <img class="image__img" src="https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg" />
     </a>

我没有改CSS，没有改元素的z-index，只改了关闭锚标签的位置。当用户悬停时，叠加层的不透明度仍然会发生变化（正如将 .image__img 类的不透明度更改为 <1). But for some reason the overlay isn't displayed above the image anymore..

时所见）

有人可以解释为什么会这样吗？

谢谢！

Codepen 1:（叠加显示在图像前面/可见（期望的结果）） https://codepen.io/domipomi123/pen/ExemymY Codepen 2：（叠加显示在图像后面）（将图像不透明度更改为 0.5，即使在图像后面也能看到叠加） https://codepen.io/domipomi123/pen/eYLWpLO

Answer 1

问题是下面显示的规则集将链接（及其子项）移动到只有

z-index

为 99 的叠加层之上。而且，正如您所注意到的，如果您没有在顶部放置锚点，它就不会t 注册悬停，因为鼠标事件被顶部的覆盖层捕获。

#imageTextGrid a.image__link {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100; /* <-- higher than the overlay */
}

为了解决这个问题，我删除了锚点上的绝对定位，并在覆盖层中添加了

pointer-events: none;

，这样当您将鼠标悬停在锚点标签上时它就不会干扰注册。作为一般规则，尽量将定位元素保持在最低限度。在这里，您唯一需要定位的是叠加层和设置为相对的“网格”元素。

另一个最佳实践是不在 CSS 中使用 id 以将 CSS 特异性保持在最低水平，因此我删除了不必要的 id 并坚持您的 BEM 约定。

/* mini-reset */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

/* Component styles */

.grid {
  padding-top: 80px;
  max-width:95vw;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(750px, 1fr));
  gap: 40px;  
  opacity: 0;
  position: relative;
  left: -80%;
  margin: auto;
  animation: slide-in 1s forwards;
  transition: opacity 1s;
}

.image {
  width: 750px;
  height: 500px;
  position: relative;
}

.image__img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.image__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(41, 139, 16, 0.651);
  color: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-in-out;
}

.image__link:hover + .image__overlay{
  opacity: 1;
}

.image__textContainer {
  display:flex;
  flex-direction: column;
  position: absolute;
  gap: 8px;
  bottom: 30px;
  left: 30px;
}

.image__title{
  font-size: 2em;
  font-weight: bold;
}

@keyframes slide-in {
  to {
    left: 50%;
    transform: translateX(-50%);
    opacity:1;
  }
}

<div id="imageTextGrid" class="grid">
  <div class="image">
    <a href="www.google.com" class="image__link">
      <img class="image__img" src="https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg" />
    </a>
    <div class="image__overlay">
      <div class="image__textContainer">
        <div class="image__title">Tiny-House in tuin</div>
        <p class="image__description">Gastenverblijf in Zweedse Stijl</p>
      </div>
    </div>
  </div>
</div>