使用position：sticky图像不固定

Question

当用户通过移动设备访问我的网站（PHP）时，我尝试使用粘性位置将两个图像固定在适当的位置。但是，尽管将位置设置为“粘滞”，但仍然无法保持原状。

我的代码：（CSS）

@media only screen and (max-width: 736px)
{


.logo{
position:sticky;
top:2%;
left:6%;
Width:43%
}

.mbanner{
position:sticky;
top:10%;
left:52%;
width:48%
}

有什么想法吗？提前致谢。

Answer 1

只需测试您的代码即可在iPhone 7上正常运行。 由于它在Safari上，因此您需要添加：

位置：-webkit-sticky;

还添加到html元数据中

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

最后CSS应该是：

@media screen and (max-device-width: 736px){

.logo{
position:sticky;
position: -webkit-sticky;
top:2%;
left:6%;
Width:43%
}

.mbanner{
position:sticky;
position: -webkit-sticky;
top:10%;
left:52%;
width:48%
}