How to fix a Lightbox gallery overlaying the site's header?

问题: I'm making a website with a Lightbox image gallery on it. Everything with the gallery and the layout of the page work works perfectly except for one thing. In desktop view,...

问题:

I'm making a website with a Lightbox image gallery on it. Everything with the gallery and the layout of the page work works perfectly except for one thing. In desktop view, it's working, but when I try to open it on a phone (or reduce the width of my browser window to the minimum) the lightbox gallery overlays the header menu of the site.

I will provide the HTML and CSS I made to put the header and in their place.

I tried using position fixed absolute and realitive on the header but it didn't work. I have no idea how to fix this to be honest.

The HTML of the header:

<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>

The HTML of the gallery:

<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>

The CSS of the 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);
}

The CSS of the gallery:

.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);
}

I didn't modify the javascript of the lightbox the code is very long, you can see it here: https://lokeshdhakar.com/projects/lightbox2/ I used the lightbox-plus-jquery.min.js.

How can I make so that when the user scrolls down in mobile view, the header overlays the image gallery?


回答1:

It seems a problem of z-index. Looking at the CSS styles of lightbox (.lightboxOverlay with z-index: 9999 and .lightbox with z-index: 10000), it would be enough to add a z-index: 10001 or more to the .header styles.

  • 发表于 2019-02-20 02:39
  • 阅读 ( 175 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除