一、CSS定位基础回顾

在开始解决移动端 fixed 定位异常问题之前，咱们先简单回顾一下 CSS 定位的基础知识。CSS 定位主要有几种方式，像 static、relative、absolute、fixed 和 sticky。

1. static 定位

这是元素的默认定位方式，元素会按照正常的文档流进行排列，也就是你在 HTML 里写的顺序，它不受 top、bottom、left、right 这些属性的影响。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .static-box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      /* 默认就是 static 定位 */
    }
  </style>
</head>

<body>
  <div class="static-box"></div>
</body>

</html>

在这个例子里，.static-box 就是以 static 定位显示在页面上，它会按照正常的文档流排列。

2. relative 定位

相对定位是相对于元素正常位置进行定位的。你可以通过 top、bottom、left、right 这些属性来移动元素，但是它原本占据的空间还是会保留。看下面这个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .relative-box {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      position: relative;
      top: 20px;
      left: 20px;
    }
  </style>
</head>

<body>
  <div class="relative-box"></div>
</body>

</html>

这里的 .relative-box 就会相对于它原本的位置向右下方移动 20 像素，但是它原本的空间还是会空着。

3. absolute 定位

绝对定位是相对于最近的已定位祖先元素（也就是 position 不是 static 的元素）进行定位的。如果没有已定位的祖先元素，那就相对于文档的 body 元素。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: lightgray;
    }

    .absolute-box {
      width: 50px;
      height: 50px;
      background-color: orange;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="absolute-box"></div>
  </div>
</body>

</html>

在这个例子里，.absolute-box 相对于 .parent 元素进行定位，它会从 .parent 元素的左上角开始，向右下方移动 50 像素。

4. fixed 定位

fixed 定位是相对于浏览器窗口进行定位的，无论页面怎么滚动，它都会固定在那个位置。这也是我们今天要重点讨论的定位方式。看个简单的例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: fixed;
      top: 20px;
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="fixed-box"></div>
  <!-- 这里添加很多内容让页面可以滚动 -->
  <p>很多很多的文字......</p>
</body>

</html>

在这个例子里，.fixed-box 会固定在浏览器窗口的右上角，无论你怎么滚动页面，它都不会动。

5. sticky 定位

粘性定位是一种混合了相对定位和固定定位的定位方式。元素在屏幕范围内时，它是相对定位，当滚动到屏幕范围之外时，它就会固定在某个位置。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .sticky-box {
      width: 100%;
      height: 50px;
      background-color: purple;
      position: sticky;
      top: 0;
    }
  </style>
</head>

<body>
  <div class="sticky-box"></div>
  <!-- 这里添加很多内容让页面可以滚动 -->
  <p>很多很多的文字......</p>
</body>

</html>

在这个例子里，.sticky-box 在页面滚动到它之前，它会按照正常的文档流排列，当滚动到它时，它会固定在页面的顶部。

二、移动端 fixed 定位出现的异常问题

在移动端，fixed 定位可能会出现一些异常问题，下面咱们来详细说说。

1. 软键盘弹出导致 fixed 元素移位

当在移动端页面上弹出软键盘时，fixed 定位的元素可能会出现移位的情况。比如，我们有一个底部固定的按钮，当弹出软键盘时，这个按钮可能会被顶上去。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-button {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <input type="text" placeholder="输入内容">
  <button class="fixed-button">提交</button>
</body>

</html>

在这个例子里，当你点击输入框弹出软键盘时，底部的“提交”按钮可能会被顶上去，这就是软键盘弹出导致 fixed 元素移位的问题。

2. 滚动时 fixed 元素闪烁或抖动

在移动端滚动页面时，fixed 定位的元素可能会出现闪烁或抖动的情况。这可能是由于浏览器的渲染机制或者性能问题导致的。比如，我们有一个固定在顶部的导航栏，当滚动页面时，导航栏可能会出现闪烁。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: black;
      color: white;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="fixed-nav">导航栏</div>
  <!-- 这里添加很多内容让页面可以滚动 -->
  <p>很多很多的文字......</p>
</body>

</html>

在这个例子里，当你滚动页面时，顶部的导航栏可能会出现闪烁或抖动的情况。

3. fixed 元素覆盖内容

有时候，fixed 定位的元素可能会覆盖页面上的其他内容。比如，我们有一个固定在右下角的返回顶部按钮，当页面内容较少时，这个按钮可能会覆盖一部分内容。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: green;
      color: white;
      padding: 10px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <p>一些文字内容</p>
  <div class="back-to-top">返回顶部</div>
</body>

</html>

在这个例子里，如果页面内容较少，右下角的“返回顶部”按钮可能会覆盖一部分文字内容。

三、解决移动端 fixed 定位异常问题的方法

针对上面提到的移动端 fixed 定位异常问题，我们可以采取一些方法来解决。

1. 解决软键盘弹出导致 fixed 元素移位的问题

可以通过监听软键盘的弹出和收起事件，动态调整 fixed 元素的位置。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-button {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
    }
  </style>
  <script>
    // 监听窗口大小变化事件
    window.addEventListener('resize', function () {
      var fixedButton = document.querySelector('.fixed-button');
      if (window.innerHeight < document.documentElement.clientHeight) {
        // 软键盘弹出
        fixedButton.style.bottom = '150px'; // 调整按钮位置
      } else {
        // 软键盘收起
        fixedButton.style.bottom = '20px'; // 恢复按钮位置
      }
    });
  </script>
</head>

<body>
  <input type="text" placeholder="输入内容">
  <button class="fixed-button">提交</button>
</body>

</html>

在这个例子里，我们通过监听窗口大小变化事件，当软键盘弹出时，动态调整按钮的位置，避免按钮被顶上去。

2. 解决滚动时 fixed 元素闪烁或抖动的问题

可以通过添加 transform: translate3d(0, 0, 0); 来开启硬件加速，提高渲染性能。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: black;
      color: white;
      padding: 10px;
      /* 开启硬件加速 */
      transform: translate3d(0, 0, 0);
    }
  </style>
</head>

<body>
  <div class="fixed-nav">导航栏</div>
  <!-- 这里添加很多内容让页面可以滚动 -->
  <p>很多很多的文字......</p>
</body>

</html>

在这个例子里，我们给导航栏添加了 transform: translate3d(0, 0, 0);，这样可以开启硬件加速，减少滚动时的闪烁或抖动。

3. 解决 fixed 元素覆盖内容的问题

可以通过调整 fixed 元素的 z-index 值，确保它不会覆盖其他内容。看个例子：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: green;
      color: white;
      padding: 10px;
      border-radius: 50%;
      z-index: 999; // 设置 z-index 值
    }
    p {
      position: relative;
      z-index: 1; // 设置内容的 z-index 值
    }
  </style>
</head>

<body>
  <p>一些文字内容</p>
  <div class="back-to-top">返回顶部</div>
</body>

</html>

在这个例子里，我们给返回顶部按钮设置了较高的 z-index 值，给文字内容设置了较低的 z-index 值，这样可以确保按钮不会覆盖文字内容。

四、应用场景

1. 固定导航栏

在很多移动端网站和应用中，都会使用固定导航栏，方便用户随时访问导航菜单。比如，一些新闻类应用的顶部导航栏，无论用户怎么滚动页面，导航栏都会固定在顶部。

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: black;
      color: white;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="fixed-nav">
    <a href="#">首页</a>
    <a href="#">新闻</a>
    <a href="#">娱乐</a>
  </div>
  <!-- 这里添加很多内容让页面可以滚动 -->
  <p>很多很多的文字......</p>
</body>

</html>

2. 底部操作按钮

在一些电商类应用中，底部会有固定的操作按钮，比如“加入购物车”“立即购买”等。无论用户怎么滚动商品列表，这些按钮都会固定在底部，方便用户操作。

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-button {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <!-- 这里添加商品列表 -->
  <p>商品 1</p>
  <p>商品 2</p>
  <p>商品 3</p>
  <button class="fixed-button">加入购物车</button>
</body>

</html>

3. 返回顶部按钮

在一些内容较多的页面中，会有固定在右下角的返回顶部按钮，方便用户快速返回页面顶部。

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: green;
      color: white;
      padding: 10px;
      border-radius: 50%;
    }
  </style>
  <script>
    var backToTop = document.querySelector('.back-to-top');
    backToTop.addEventListener('click', function () {
      window.scrollTo(0, 0);
    });
  </script>
</head>

<body>
  <!-- 这里添加很多内容让页面可以滚动 -->
  <p>很多很多的文字......</p>
  <div class="back-to-top">返回顶部</div>
</body>

</html>

五、技术优缺点

优点

  • 方便用户操作：fixed 定位可以让元素固定在页面的某个位置，方便用户随时访问，比如固定导航栏和底部操作按钮，用户不需要滚动到页面顶部或底部就能进行操作。
  • 增强页面的视觉效果：固定的元素可以让页面看起来更加整洁和有序，比如固定的返回顶部按钮，给用户一种简洁的感觉。

缺点

  • 兼容性问题：在不同的移动端浏览器和设备上，fixed 定位可能会出现一些兼容性问题，比如软键盘弹出导致 fixed 元素移位、滚动时 fixed 元素闪烁或抖动等。
  • 覆盖内容：如果不注意调整 fixed 元素的位置和 z-index 值，可能会覆盖页面上的其他内容，影响用户体验。

六、注意事项

1. 兼容性测试

在使用 fixed 定位时，一定要在不同的移动端浏览器和设备上进行兼容性测试，确保在各种情况下都能正常显示和使用。

2. 合理设置 z-index 值

要合理设置 fixed 元素的 z-index 值，避免覆盖其他重要内容，影响用户体验。

3. 避免过度使用

不要过度使用 fixed 定位，过多的固定元素会让页面看起来杂乱无章，影响用户体验。

七、文章总结

通过本文，我们回顾了 CSS 定位的基础知识，了解了移动端 fixed 定位可能出现的异常问题，如软键盘弹出导致 fixed 元素移位、滚动时 fixed 元素闪烁或抖动、fixed 元素覆盖内容等。针对这些问题，我们介绍了相应的解决方法，如监听软键盘事件调整元素位置、开启硬件加速减少闪烁、调整 z-index 值避免覆盖内容等。同时，我们还介绍了 fixed 定位的应用场景，如固定导航栏、底部操作按钮、返回顶部按钮等，并分析了 fixed 定位的优缺点和注意事项。希望本文能帮助你更好地解决移动端 fixed 定位的异常问题，提升移动端页面的用户体验。