Question

Here is a demonstration of my current project.

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

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

滑块代码：

<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中，删除z-index: 0;上的#full-width-slider（第83行style.css） - 通过开发工具修复我。

另一种解决方案（不需要挖掘源顺序和堆叠问题的解决方案）是降低叠加#header部分元素的高度，然后应用margin-bottom使子弹可以从下面访问（你可能需要调整下面的实际值）：

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

希望能做到！

CSS定位问题

1 个答案: