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

Question

我在移动 Safari 和 Chrome 上遇到了无法在桌面上复制的意外问题。我正在将导航修改为固定在顶部，但是当我向下滚动页脚时发现隐藏了移动浏览器上的导航。

我记录了一个例子来说明我的意思：

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

在 iPhone 上的移动 Safari 和 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）设置为eskimo-sidebar id的元素。