Question

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

工作情况：

我有一个基本的容器/内容设置，容器填满整个正文，内容有一个固定的width，位于中间margin: auto。

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

此links-container元素为position: fixed。 link为position: relative，其偏移量为right: 'size'，以使链接显示在容器外部。

错误：

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

您可以看到错误here以及下面的代码。

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

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

CSS - 固定元素内部相对元素：定位bug？

0 个答案: