桌面端和移动端的负边距不一样

Question

我正在尝试让一个标志图标一半位于特定容器上，一半位于特定容器之外。在我的桌面上它看起来很完美，当我使用谷歌浏览器工具来模拟移动设备时它看起来也很完美。但当我在实际手机上查看时，位置不正确。它位于容器顶部。

<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;

之类的属性来定位它。

Answer 2

今天，2024 年，偶然发现了这个问题。 这怎么还是一个问题呢？令人着迷... 我的意思是，图像的边距在桌面上和在移动设备上应该是一样的，对吧，我们都同意这一点吗？嗯，他们没有。真糟糕。这真是太糟糕了:(