遇到个奇怪的问题，在微信小程序页面中添加一个底部固定按钮，设置样式为fixed，结果在iphone11上会失效，即按钮会跟着页面布局移动，修改过程在此记录一下，遇到相同问题的朋友可以看下是否你也是相同问题。
手机版本：iphone 11
重现代码：
index.wxml文件内容：
<view class="content">
</view>
<view class="btn">测试按钮</view>index.wxss文件内容
.content{
width:100%;
height:3000rpx
background: #f7f7f7;
}
.btn{
width: 560rpx;
height: 80rpx;
background: #3080DB;
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
position: fixed;
bottom: 68rpx;
z-index: 2;
margin: 0 auto;
}问题解决方案：
在index.wxss中增加如下代码，最终代码如下：
/** 这是增加的代码 **/
page{
width: 100vw;
height: 100vh;
position: relative;
}
.content{
width:100%;
height:3000rpx
background: #f7f7f7;
}
.btn{
width: 560rpx;
height: 80rpx;
background: #3080DB;
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
position: fixed;
bottom: 68rpx;
z-index: 2;
margin: 0 auto;
}iphone手机有时候比较怪异，开发工具也没有个iphone11的模拟器，所以出现问题只能各种试，在此记录一下
如果本文对您有帮助还请动手点个赞，以帮助更多人作为参考。
下面对css fixed进行以下知识扩展：
css中固定定位fixed是什么？
说明
1、固定定位是元素固定在浏览器可视区的位置。固定定位也可以算是一种特殊的绝对定位。
2、使用场景为当浏览器页面滚动时，元素的位置不会改变。
固定定位的特点
-
以浏览器的可视窗口为参考点的移动元素。
-
和父元素无关。
-
不要随滚动条滚动。
-
固定定位不占用原位置。固定定位也是脱标的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.w {
width: 800px;
height: 1400px;
margin: 0 auto;
background-color: pink;
}
.fixed {
position: fixed;
/*1,走浏览器宽度的一半*/
left: 50%;
/*2，走版心盒子的一半，想宽一点可以加多一点px*/
margin-left: 400px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
</div>
<div>
版心盒子
</div>
</body>
</html>以上就是css中固定定位fixed的介绍，希望对大家有所帮助。
