отрицательная разница не одинакова для настольных и мобильных устройств

Question

Я пытаюсь заставить иконку флага сидеть наполовину и наполовину от конкретного контейнера. На моем рабочем столе это выглядит идеально, и когда я использую инструменты Google chrome для имитации мобильных устройств, это также выглядит отлично. Но когда я смотрю на него на реальном мобильном телефоне, позиция неверна. Он сидит на вершине контейнера.

<div className="stats-container">
 <div className="flag">
  <img src={country && country.countryInfo.flag} />
 </div>
</div>

.stats-container {
  padding: 5rem;
  background: white;
  box-shadow: 0px 20px 100px rgba(2, 2, 3, 0.1);
  border-radius: 5px;
  text-align: center;
}

.flag img {
  max-width: 70px;
  margin-top: -110px;
}

Answer 1

Вы пытались использовать абсолютное позиционирование вместо отрицательного поля? Это будет отображать его относительно ближайшего предка, а не области просмотра, поэтому не должен зависеть от размера экрана. Использование может использовать свойства, такие как top: 10;, чтобы позиционировать его тогда.