CSS定位问题

Here is a demonstration of my current project.CSS定位问题

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

而且我有关系的问题，这似乎是在不同的位置，如果我在不同的充电脑（我的笔记本电脑和我的PC）的信息框（每张幻灯片的标题） - 是有办法解决这个标题框所以它符合标志？

代码滑块：

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

来源

2013-10-16 David

请在这里发布您的代码，所以我们可以帮助解决它。 – Doorknob

你好门把手，非常感谢你修理我的文章。请在这里找到我的项目的完整源代码：http://life-style-sports.com/project/index.php – David

是的，你已经展示过，但你应该发布你有问题的特定代码在这里。 – Doorknob

在你的CSS，在#full-width-slider（线83个style.css文件）删除z-index: 0; - 即通过开发工具修复了我。

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

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

希望能够做到！

来源

2013-10-16 03:59:18

您好 - 感谢您的留言。我早些时候尝试过这种方法，它启用了幻灯片控件，但导航在幻灯片更改时消失。 – David

在这种情况下，这取决于定位/ z索引/和源顺序的组合。您的滑块放置在剩余标记的包装之外和之前。根据下面列出的规则，需要修改每个组件的z-index：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index –

在答案中添加了解决方案：） –

回答

相关问题