1

我正在开发具有“对接”标题的网站的测试版。当访问者向下滚动页面时，标题锁定到位，页面内容在标题下方滑动。

这适用于这样的内容页面：http ://www.aride.org.nz/longest-day/how-to-do-the-longest-day-ride/

但不适用于上面有 Google 地图的页面，如下所示：http ://www.aride.org.nz/longest-day/2013/

您可能需要减小视口大小，以便可以向下滚动页面足够远。

这似乎只发生在 Chrome 上。它可以在 Safari 5、Firefox 23、Opera 15 甚至（呃）Internet Explorer 9 上按预期工作。

使用 Web Developer 查看 Chrome 中的页面会显示所有正确的堆栈级别，主要内容的 z-index 设置为 1 - 与标题和导航的 99/999/9999 相比。

任何想法都将不胜感激 - 我已经碰壁了。

4

1 回答 1

1

解决方案：

我相信让您的#header-container元素保持固定，而不是子header元素本身，将解决您的问题。与堆叠上下文有关，我不会假装完全理解。

解释：

由于 Google 在地图中使用了 3d 变换，您的布局正在中断。这是一个相关的问题。

tl;博士：

3d 转换破坏了浏览器确定受影响元素的堆叠顺序的能力。

于 2013-11-08T06:18:48.353 回答