Question

这是一个已知的“错误”，如果容器被翻译，具有固定位置的元素会松开它们的位置。例如，如果我有这样的结构：

<div class="container">
   <div class="fixed"></div>
</div>

并且，比如，当变换器被变换时（例如，translate（x，y），rotate（）或者等等），容器被滚动，然后固定元素的行为就像它相对定位并且滚动与容器。例如，我可以在最新的Firefox上看到它。

如何解决这类问题？有什么办法吗？

Answer 1

此行为不是错误。这实际上是the specs推荐的行为（请参阅this post by Eric Meyer，或此问题here on SO哪个接受的解决方案仅提供指向同一个meyer帖子的链接）

对于那些不知道这个问题的人，以及因为你没有在你的问题中提供一个片段，这里就是一个。

document.addEventListener('click', function() {
  document.getElementById('container').classList.toggle('transformed')
}, false);

#bg {
  border: 1px solid #AFA;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#container {
  border: 1px solid #FAF;
  height: 50%;
  width: 75%;
  position: relative;
  margin: 0 auto;
  overflow: auto;
}
#content {
  background: rgba(125, 175, 0, .7);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.transformed {
  transform: translate(0, 5em);
}

<div id="bg">
  <div id="container" class="transformed">
    .<br>.<br>.<br>.<br>.<br>.<br>.
    this is a scrollable paragraph
    <br>.<br>the "fixed" content does scroll with the paragraph
    <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
    you can click to toggle the transformation On/Off
    <br>.<br>.<br>.<br>.<br>.
    <span id="content">relatively fixed content</span>
  </div>
</div>

但是，我确实找到了可以帮助其他人面对同样问题的事情 这不是一个真正的解决方案，，因为“fixed”元素只会在容器内部，（除了IE浏览器，它将真正固定在文档中）。但在我的情况下，它实际上是我想要的，也许对其他人来说也没关系。

如果您添加了包装器，请设置其height:100%; width:100%;和overflow:auto，那么您的“已修复”内容将无法使用容器滚动 。

实际上它不是你滚动的容器，而是包装器。因此，您可能需要设置容器的overflow:visible或hidden，以避免不必要地滚动不太好的“固定”元素。
另请注意，您需要将包装器设为block或inline-block元素。

#bg {
  border: 1px solid #AFA;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#container {
  border: 1px solid #FAF;
  height: 50%;
  width: 75%;
  position: relative;
  margin: 0 auto;
  overflow: visible;
}
#wrapper {
  height: 100%;
  width: 100%;
  overflow: auto;
}
#content {
  background: rgba(125, 175, 0, .7);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.transformed {
  transform: translate(0, 50%);
}

<div id="bg">
  <div id="container" class="transformed">
    <div id="wrapper">
      .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
      <span id="content">relatively fixed content</span>
    </div>
  </div>
</div>

Answer 2

我不熟悉这个bug，但是当你使用positioned: fixed;元素相对于浏览器窗口定位时，将它放在容器中并没有任何意义。这个标记将是我的建议：

<div class="fixed"></div>
<div class="container"></div>

Answer 3

在任何元素上使用position: fixed;后，它相对于视口定位。直接来自page in MDN about position property。

<强>固定
不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。

所以你所经历的是它实际上应该工作的东西，而不是一个＆＃39; bug。

现在，如果您想要的是与.container div相关的定位并使用它进行翻译，那么您必须在此处使用absolute定位。看看this fiddle。重要的CSS是 -

.container {
  width: 200px;
  height: 100px;
  position: relative;
}
.absolute {
  position: absolute;
  width: 20px;
  height: 10px;
  top: 50px;
  left: 50px;
}

请注意，通过将内部div定位为absolute，我还将外部div定位为relative，因为内部div在引用最接近的父div时将其位置定位为与{{ 1}}。

如何在转换元素中保留元素的固定位置？

3 个答案: