为什么“位置：固定”在旧版移动浏览器中不起作用？

位置固定在移动浏览器中不起作用

问题：

使用 CSS 的位置固定元素：fixed可能不适用于旧版本的 iOS 和 Android 移动浏览器。元素随页面滚动，忽略固定定位。

原因：

旧版浏览器，如 iOS

5、Android

解决方案：

使用 -webkit-backface-visibility:hidden;

<code class="css">.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden; /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/
}</code>

此 CSS 属性强制浏览器将元素视为 3D 元素，从而实现固定定位。

示例代码：

<code class="html"><div class="fixed">
  Hi I m Position Fixed
</div>
<div>
  sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
</div></code>

该解决方案已经过测试，可在大多数移动浏览器中顺利运行，包括旧版本的 iOS 和 Android。

以上是为什么“位置：固定”在旧版移动浏览器中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！