jquery - CSS 定位问题

Question

Here is a demonstration of my current project.

我遇到的主要问题与我在市场上购买的主 slider 及其定位有关:我想实现这种将导航重叠在 slider 上的效果，这似乎在一定程度上起作用，但是我无法单击每张幻灯片的实际元素符号。

我还有一个关于信息框(每张幻灯片的标题)的问题，如果我在不同的计算机(我的笔记本电脑和我的 PC)上，它似乎处于不同的位置 - 有没有办法修复这个标题框它与 Logo 一致吗？

slider 代码:

<div id="full-width-slider" class="royalSlider heroSlider rsMinW">
  <div class="rsContent">
    <img class="rsImg" src="img/slider/1.jpg" alt="">
    <div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
      <h4>This is an animated block, add any number of them to any type of slide</h4>
      <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
    </div>
  </div>

  <div class="rsContent">
    <img class="rsImg" src="img/slider/2.jpg" alt="">
    <div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">
      <h4>This is an animated block, add any number of them to any type of slide</h4>
      <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
    </div>
  </div>
</div>

Answer 1

在您的 CSS 中，删除 #full-width-slider 上的 z-index: 0;(第 83 行 style.css)- 通过开发工具为我修复.

另一种解决方案(不需要深入研究源代码顺序和堆叠问题)是降低过度堆叠的 #header 部分元素的高度，然后应用 margin-bottom 使元素符号可以从下方访问(您可能需要调整下面的实际值):

    #header {
    height: 450px;
    max-height: 450px;
    position: relative;
    margin-bottom: 30px;
    }

希望如此!