ios fixed定位后内容不显示_web前端技术讲解之CSS中position的定位技术

在 iOS 设备上，当使用 `position: fixed` 属性时，有时候会出现内容不显示的情况。这是因为 iOS 设备对 `position: fixed` 属性的支持存在一些问题。

解决这个问题的方法是在 `position: fixed` 的元素外再套一个容器，并给这个容器设置 `overflow: auto` 属性。如下所示：

<div class="container">
  <div class="fixed-element">Fixed element</div>
  <div class="content">Content</div>
</div>

.container {
  position: relative;
  overflow: auto;
  height: 100vh; /* 设置容器的高度 */
}
.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
}

这样做的原理是利用 `overflow: auto` 属性使容器成为了一个滚动容器，可以将 `position: fixed` 的元素限制在容器内，从而避免了 iOS 设备上的显示问题。