0

这是我当前项目的演示。

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

此外，如果我在不同的计算机（我的笔记本电脑和我的电脑）上，信息框（每张幻灯片的标题）似乎处于不同的位置，我也有一个问题 - 有没有办法修复这个标题框，以便它是符合标志？

滑块代码：

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

1 回答 1

0

在您的 CSS 中，删除（z-index: 0;第#full-width-slider83 行 style.css）-通过开发工具为我修复。

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

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

希望能做到！

于 2013-10-16T03:59:18.440 回答