css - Chrome 和谷歌地图的 z-index 堆叠问题

Question

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

这在这样的内容页面上工作正常:http://www.aride.org.nz/longest-day/how-to-do-the-longest-day-ride/

但不适用于像这样带有 Google map 的页面:http://www.aride.org.nz/longest-day/2013/

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

这似乎只发生在 Chrome 上。它可以在 Safari 5、Firefox 23、Opera 15 甚至(呃)Internet Explorer 9 上正常运行。

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

如有任何想法，我们将不胜感激 - 我最后碰壁了。

Answer 1

解决方案:

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

解释:

由于 Google 在 map 中使用 3d 变换，您的布局被破坏了。 Here's a related question.

tl;dr:

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