Question

我准备了 DEMO 来向您展示一些有趣的事情。此演示包含基本的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>

当用户点击图片时，它会打开并占据整个屏幕，但如果 .wrapper 具有相对位置，则图片不会被占用全屏，因为导航栏将与图像重叠。

亲自试试。

打开演示。

点击图片。

关闭图片。

点击按钮。

点击图片。

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

如何解决这个问题？

Answer 1

当您正在进行div相对时，您还要向其添加z-index: 1 - 并且您的导航栏已经z-index: 10，因此这是此类行为的主要原因。

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

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

相对容器内的Blueimp图库与固定块重叠

1 个答案: