响应式导航栏隐藏其下方的元素

Posted 2023-04-13

【中文标题】响应式导航栏隐藏其下方的元素

【英文标题】：Responsive Nav Bar Hides Element Below it

【发布时间】：2017-01-15 22:01:07

【问题描述】：

我创建了一个响应式导航栏，但它使下面的元素，一个 Flexslider 插件，消失了。在我制作导航栏之前，下面的 Flexslider 会显示得很好，但现在却没有。导航栏的 z-index 为 2，所以我不知道问题出在哪里。我应该如何/我应该改变什么以允许 Flexslider 显示并且导航栏仍然响应？谢谢！

我的代码有点长，所以在 cmets 中有代码笔（它不会让我把它们贴在这里）

这是一个没有响应式导航的网站链接，但它显示了 Flexslider：http://bancroftmiddleschool.org

使用响应式导航链接到文件，但不显示 Flexslider：http://bancroftmiddleschool.org/index%20copy.html

【问题讨论】：

带有响应式导航的代码笔，但隐藏了 flexslider:codepen.io/caguilera0001/pen/JRdpGV（请注意，由于某些原因，Flexslider 不会出现在代码笔中）

谁能告诉我为什么这个问题被降级以便我详细说明或修复它？

【参考方案1】：

将#navBar 中的位置 CSS 从 position:absolute;到位置：相对；。

#navBar
    position: relative;
    /* leave rest of the css unchanged */

希望这是预期的效果。

【讨论】：

我试过了，但是flexslider还是不显示

你添加的第二个链接是不是想要的效果？

是的，帖子中的第二个链接。现在应该已经上传了。如果没有，可能需要更多时间上传。

即使没有上传，当我在测试服务器上测试页面时，flex滑块也不会显示。还有其他想法吗？

非常感谢！