使用Lightbox图库遇布局问题：主导航遮挡图片的技术求助

我已经很久没写网站脚本了，最近正在做一个摄影作品集网站——把所有照片做成缩略图展示，用了Lightbox脚本实现图库功能。这个脚本用着挺顺手，但遇到个兼容性问题：我的主导航会悬浮在Lightbox的图片上方，把图片挡住了。

我试着写了一段脚本想解决，但没写完：

// Open the Modal
function openModal() {
  document.getElementById('myModal').style.display = "block";
  var mainna...

这种导航遮挡Lightbox的问题，90%都是元素的z-index层级冲突导致的——你的导航z-index值比Lightbox的模态框更高，所以会盖在上面。给你几个实用的解决思路：

1. 直接提升Lightbox的层级（最推荐） #

找到Lightbox的模态框元素（就是你代码里的#myModal），在CSS里给它加一个足够高的z-index，确保比导航的层级高：

#myModal {
  z-index: 9999; /* 先试试这个值，如果还是被挡就调得更大，比如10000 */
}

如果不知道导航的z-index是多少，打开浏览器开发者工具（F12）选中导航元素，看它的CSS属性里的z-index值，只要#myModal的z-index比它大就行。

2. 打开Lightbox时临时隐藏导航 #

如果调整z-index不管用（比如导航有特殊的定位属性），可以在打开Lightbox的时候把导航藏起来，关闭时再显示：

function openModal() {
  document.getElementById('myModal').style.display = "block";
  // 假设你的导航元素id是mainNav，改成你实际的id
  document.getElementById('mainNav').style.display = "none";
}

// 别忘了在关闭模态框的函数里恢复导航
function closeModal() {
  document.getElementById('myModal').style.display = "none";
  document.getElementById('mainNav').style.display = "block";
}

3. 临时降低导航的层级 #

不想隐藏导航的话，可以在打开Lightbox时把导航的z-index设得很低，关闭时再恢复原来的数值：

function openModal() {
  document.getElementById('myModal').style.display = "block";
  const mainNav = document.getElementById('mainNav');
  // 先保存原来的z-index，存在元素的自定义属性里
  mainNav.dataset.originalZ = mainNav.style.zIndex || getComputedStyle(mainNav).zIndex;
  // 把导航层级设低
  mainNav.style.zIndex = "-1";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
  const mainNav = document.getElementById('mainNav');
  // 恢复原来的层级
  mainNav.style.zIndex = mainNav.dataset.originalZ || "";
}

如果这些方法还不行，你可以把导航的HTML结构和CSS代码贴出来，我帮你再排查~

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