相关容器内的 Blueimp 画廊被固定块重叠

Question

我准备了一个DEMO to show you some interesting thing. This demo contains basic blueimp gallery setup example、导航栏和按钮。

<div class="nav">nav</div>

<div class="wrapper">

  <div id="links">
    <a href="images/banana.jpg" title="Banana">
      <img src="images/thumbnails/banana.jpg" class="image" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple">
      <img src="images/thumbnails/apple.jpg" class="image" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange">
      <img src="images/thumbnails/orange.jpg" class="image" alt="Orange">
    </a>
  </div>

  <div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
  </div>

</div>

<button type="button" class="button">Click Me</button>

当用户点击图片时，它会打开并占据全屏，但是if.wrapper 有相对位置,图片不会占据全屏，因为导航栏会覆盖图片。

自己试一下。

打开演示。
点击图片。
关闭图片。
点击按钮。
点击图片。

之后您会看到，导航栏将与图像重叠。

如何解决这个问题？

Answer 1

当您使 div 成为相对对象时，您也在向其添加 z-index: 1 - 并且您的导航栏已经具有 z-index: 10，因此这是造成此类行为的主要原因。

尝试在您的样式表中将大于 10 的 z-index 添加到相对 div：

  &_relative {
    position: relative;
    z-index: 11;
  }

相关容器内的 Blueimp 画廊被固定块重叠

Blueimp gallery inside relative container is overlapped by fixed blocks

html

javascript

css

image-gallery