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

Question

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

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

并且，比如说，容器被滚动，当容器被转换时（比如说，translate(x,y)，rotate() 等等），那么固定元素的行为就像它是相对定位的并且它滚动与容器。例如，我可以在最新的 Firefox 上看到它。

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

Answer 1

我不熟悉这个错误，但是当您使用positioned: fixed; 时，该元素是相对于浏览器窗口定位的，因此将其放入容器中并没有任何意义。 这个标记是我的建议：

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

Answer 2

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

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

因此，您所遇到的是实际应该工作的情况，而不是“错误”。

现在，如果您想要的是相对于 .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，其位置与 static 不同。

Answer 3

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

对于那些不知道这个问题的人，并且因为您没有在问题中提供 sn-p，这里有一个。

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，那么你的"fixed" 内容不会随着容器滚动。

实际上滚动的不是你的容器，而是包装器。因此，您可能需要设置容器的 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>