奇怪的位置：iOS和Chrome上的固定行为（Windows）

Question

我创建了一个看起来与它在Firefox上应该完全一样的网站但不幸的是在设备的某些设备上不在iOS（使用Safari webkit）和chrome上。它只是没有正确显示菜单栏（它应该是位置固定）。这里的问题是，我不知道问题是什么。

屏幕截图：
 地址栏和照片之间的空白区域应为菜单：

在这里，您会看到只有在父级上方的菜单才会看到该菜单

我无法弄清楚为什么它会像这样，因为根据各种wiki的位置，固定是相对于视口而不是它的父级＆＃34;视口始终是它们的包含块＆＃ 34; （http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary）

* CSS：

.main-navigation {
  clear: both;
  float: left;
  width: 100%;
  position: fixed;
  width: 100vw;
  height: 6rem;
  background: -webkit-linear-gradient(top, #fff, #d6d6d6);
  background: -moz-linear-gradient(top, #fff, #d6d6d6);
  background: -ms-linear-gradient(top, #fff, #d6d6d6);
  background: -o-linear-gradient(top, #fff, #d6d6d6);
  top: 0;
  right: 0;
  z-index: 100;
  overflow: visible;
}
nav {
  display: block;
}
.home header.site-header {
  top: 24rem;
  left: 8rem;
  position: absolute;
  z-index: 3;
}

.home header.site-header是菜单的父级

Answer 1

移动设备/移动浏览器上:position: fixed;存在很多问题，我甚至不知道从哪里开始。

http://bradfrost.com/blog/mobile/fixed-position/

查看Brad Frost关于此事的文章，你会明白为什么这不是一件容易完成的任务。

Filament Group的固定粘性修复可能有所帮助： https://github.com/filamentgroup/fixed-sticky