具有滚动容器的绝对定位元素

Question

一个绝对定位的元素应该从元素流中移除，并且(我理解)不能使文档更大(创建滚动条)，而只是消失在视线之外和思想之外。

但是在我的实验中，当我把一个绝对元素偏移到左边时，我得到了滚动条，在右边，我得到了预期的行为。它为什么要这样做，我怎么能得到我期待的行为呢？

http://jsbin.com/bosajigapifu/6/edit

Answer 1

如果您将定位的绝对元素放入一个容器中，即width: 100%，但overflow: hidden，则可以通过这种方式“将其推入空”。只要它的容器不超出窗口的范围，它就不会显示滚动条。

要素：

<div id="container">
   <div id="absolute"></div>
</div>

风格：

<style>
  #container{
    width: 100%;
    overflow: hidden;
  }
  #absolute{
    position: absolute;
  }
</style>

Answer 2

绝对定位的元素不会推送其他元素，但是如果它相对于的元素是最近的滚动祖先，它就会推出滚动框。

这个想法是，它的内容和应该显示。当你想在卷轴容器外定位一些东西时，你会觉得有些烦人。

Answer 3

您可以使用position: fixed而不是绝对值。

差异在于，它不受任何父元素的约束，只受视图端口本身的约束，但在偏移时不创建滚动条.

http://jsfiddle.net/t6g4421a/