Javascript 如何修复覆盖站点的灯箱画廊'；s头球？

我正在制作一个网站，上面有一个灯箱图像库。除了一件事之外，画廊和页面布局的一切都非常完美。 在桌面视图中，它工作正常，但当我尝试在手机上打开它（或将浏览器窗口的宽度减至最小）时，lightbox gallery会覆盖网站的标题菜单

我将提供HTML和CSS，我把标题和在他们的地方

我试着在头球上使用位置固定绝对和realictive，但都不起作用。老实说，我不知道如何解决这个问题

标题的HTML：

<header>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="shiatsu.html">Shiatsu</a></li></strong>
            <li><a href="holistica.html">Terapia Holística</a></li>
            <li><a href="cristais.html">Terapia com Cristais</a></li>
            <li><a href="pantala.html">Pantaloterapia</a></li>
        </ul>
</header>

header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    background: #f9f3ff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
}

画廊的CSS：

<div class="gallery">
    <a href="images/holistica/1.jpeg" data-lightbox="galeriaholistica"><img src="images/holistica/1.jpeg"></a>
    <a href="images/holistica/2.jpeg" data-lightbox="galeriaholistica"><img src="images/holistica/2.jpeg"></a>
</div>

.gallery img {
    width: 100%;
    max-width: 230px;
    height: 230px;
    margin: 10px 10px 0 0;
    filter: grayscale(100%);
    transition: 1s;
}

.gallery img:hover {
    filter: grayscale(0);
    transform: scale(1.1);
}

我没有修改lightbox的javascript代码很长，你可以在这里看到： 我使用了lightbox-plus-jquery.min.js

---

如何使用户在移动视图中向下滚动时，标题覆盖在图像库上？

这似乎是z-index的问题。查看lightbox的CSS样式（.lightboxOverlay具有z-index:9999和.lightbox具有z-index:10000），在.header样式中添加一个z-index:10001或更多就足够了