CSS定位问题仅在移动设备上

Question

我在移动Safari和Chrome上遇到了意外问题，无法在台式机上复制。我将导航栏修改为固定在顶部，但在向下滚动页脚时发现导航栏将其隐藏在移动浏览器中。

我录制了一个示例，向您展示我的意思：

在桌面浏览器上可以预期并能正常工作（导航下的页脚幻灯片）： https://drive.google.com/open?id=1bmUMsfEpauuXx2Jhyf7l2YQrORj6E__z

在移动Safari和iPhone上的Chrome上会发生什么（导航栏位于导航栏顶部）： https://drive.google.com/open?id=1-ri1DqmWPY8hrUP4LaUr-aGpnfH3eVhC

站点可在此处访问： http://michaelespinosa.com/projects/eskimo/index.html

这是导航的css：

  #eskimo-sidebar {
    position: fixed;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    height: 200px;
    margin-bottom: 60px;
    z-index: 99;
  }

以下是页脚的CSS：

  #eskimo-sidebar {
    position: relative;
    background-color: red;
  }

我觉得我必须缺少明显的东西。提前感谢帮助。

Answer 1

您的网站存在很多问题，尤其是在移动设备上。关于您提到的问题，请尝试将z-index: 10（或100）设置为ID为eskimo-sidebar的元素。