css - CSS - 相对元素内的固定元素：定位错误？

Question

我遇到了一个非常奇怪的配置问题。

工作情况：

我设置了一个基本的容器/内容，容器填满了整个主体，内容固定width在中间，位置为margin: auto.

在此内容中，我有一个links-container元素，其中包含一个link包含我的链接的元素。

这个links-container元素是position: fixed。并且带有偏移量：link使链接看起来在容器之外。position: relativeright: 'size'

漏洞 ：

对于某些页面，我需要内容向右滑动 : left: 50px。
但出于某种原因，在 Firefox 上，链接将保持在内容附近，而在 Chrome 上，它们将保持在同一个位置。

您可以在此处查看错误，以及下面的代码。

这是一个错误，还是我错过了什么？

HTML：

<div class='container'>
  <div class='content'>
    <div class='links-container'>
      <div class='links'>
      </div>
    </div>
  </div>
</div>

CSS：

body {
  padding: 100px;
}

.container {
  width: 100%;
  height: 100%;
}

.content {
  width: 500px;
  height: 300px;
  background: red;
  position: relative;
  margin: auto;
  background: red;
  left: 50px;
}

.links-container {
  position: fixed;
}

.links {
  position: relative;
  background: yellow;
  width: 50px;
  height: 50px;
  right: 50px;
}