解决Magnific Popup画廊中绝对定位遮罩致图片链接不可点击问题

使用Magnific Popup制作图片画廊时，为图片添加hover事件显示查看图标，将图标容器设为绝对定位后，图片链接无法点击，无法触发画廊轮播。尝试设置z-index: 1无效。

修复方案 #

问题核心是绝对定位的.gallery-item-info遮罩层覆盖了下方的<a>链接，默认情况下，绝对定位元素会在普通流元素上方，导致点击事件被遮罩层拦截。以下两种方法可解决：

方法1：给<a>标签设置层级优先级 #

由于父容器.gallery-item已设为position: relative，给<a>标签添加position: relative和更高的z-index，确保它在遮罩层上方：

.gallery-item a {
  position: relative;
  z-index: 2;
  pointer-events: all;
}

方法2：让遮罩层不拦截点击事件 #

给.gallery-item-info添加pointer-events: none，使点击事件直接穿透到下方的链接：

.gallery-item-info {
  display: none;
  pointer-events: none;
}

两种方案都能解决问题，推荐方法1，层级关系更清晰，后续扩展样式时不易出冲突。

修复后完整代码 #

JavaScript #

$(document).ready(function() {
  $('.seller-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1] // 预加载当前图片的前0张和后1张
    },
    image: {
      tError: '<a href="%url%">图片 #%curr%</a> 加载失败',
      titleSrc: function(item) {
        return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
      }
    }
  });
});

CSS #

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.gallery-item {
  cursor: pointer;
  position: relative;
}

.gallery-item a {
  position: relative;
  z-index: 2;
  pointer-events: all;
}

.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

.gallery-item-info {
  display: none;
}

.gallery-item-info span {
  display: inline-block;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<div class="seller-gallery gallery-item">
  <a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80">
    <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="" class="img-fluid">
  </a>
  <div class="gallery-item-info">
    <span><i class="fas fa-eye fa-2x text-white"></i></span>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Parit Sawjani