为什么我的导航栏在谷歌浏览器中没有按预期显示，但在其他浏览器上有效答案

【问题标题】：Why does my Navbar not display as intended in Google Chrome, but works on other browsers为什么我的导航栏在谷歌浏览器中没有按预期显示，但在其他浏览器上有效
【发布时间】：2018-01-20 11:49:51
【问题描述】：

我创建了一个网站，在全背景滑块的顶部放置了一个透明导航栏。当显示宽度减小时，滑块被隐藏，并且导航栏在切换打开时显示在深色背景上。导航栏打开时，页面内容会下降。这就是它在 Safari 和 Firefox 中的功能。

在 Chrome 中查看时会出现此问题。页面正确打开，但在滚动时，导航栏出现在背景滑块上方，因此不再透明。它看起来像一个包含导航栏的深蓝色条带出现在页面顶部。这实际上是页面背景颜色，因为导航栏现在位于背景滑块的顶部。我通过在 CSS 中添加 position: absolute 来纠正这个问题：

.navbar-inverse {
    background-color: transparent;
    border-color: transparent;
    position: absolute;
    width: 100%;
}

全尺寸视图现在在所有浏览器中看起来都很好，但是当以 sm 或 sx 尺寸查看时，导航栏链接显示在透明背景上，在切换打开时与页面内容重叠。页面内容不再下拉以适应打开的导航栏。有什么方法可以让导航栏在 Chrome 和其他浏览器中以各种尺寸正确显示？

无法在 Chrome 上运行的原始站点：http://mcgsf.net。
更新的网站可在所有浏览器中以全尺寸运行，但不适用于 sm 或 sx：http://mcgsf.net/test081017/index.html。

【问题讨论】：

标签： twitter-bootstrap google-chrome navbar

【解决方案1】：

看着 chrome 中的 http://mcgsf.net，我注意到背景图像在过渡后跳到了适当的位置。查看.carousel .item 的css，您设置了position: fixed，但没有为其设置任何明确的位置。所以它的位置相对于它的容器是固定的，它恰好相对于导航栏定位。我认为您希望轮播项目始终固定在顶部。在导航栏上设置position: absolute 可以实现这一点，因为导航栏不再影响其他相对定位的元素，但这会产生意想不到的副作用，即这些元素不会响应扩展菜单。

相反，将top: 0 设置为.carousel .item（并删除负边距）以将其固定到窗口顶部。然后，你就不需要弄乱你的导航栏了。

【讨论】：