Изображения не остаются на месте, используя положение

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, вам нужно добавить:

position: -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%
}