Question

position: fixed是一个古怪的小家伙，特别是在移动设备方面。

当尝试将固定元素与宽度大于设备高度的其他元素一起使用时，会破坏Mobile Safari。

我希望在内容可滚动时将标题保持在顶部。有没有办法解决这个问题而不会失去经验？

提前致谢！

实施例

http://debug.studiotate.com/mobile-safari-position-fixed（这是我看到的问题 - 当您向下和/或向右滚动时标题会消失）

预期：

http://debug.studiotate.com/mobile-safari-position-fixed/expected（这应该是它的样子 - 标题保持不变）

CODE：

<!DOCTYPE html>

<html>

<head>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
  <style type="text/css">
    body {
      margin: 0px;
    }

    header {
      background-color: #00FF00;
      left: 0px;
      position: fixed;
      top: 0px;
    }

    div {
      background-color: #FF0000;
      height: 1500px;
      width: 1000px;
    }
  </style>
</head>

<body>
  <header>Header</header>
  <div></div>
</body>

</html>

Answer 1

我认为必须删除div并将背景设置为正文

<body>
  <header>Header</header>
</body>

和CSS：

body {
  margin: 0px;
  background-color: #FF0000;
}

header {
  background-color: #00FF00;
  left: 0px;
  position: fixed;
  top: 0px;
}

如果元素的宽度超过设备的高度，`position：fixed`不能在Mobile Safari上工作

1 个答案: