Html 为什么此文档会随着位置：绝对和转换：翻译而水平增长？

我在PhoneGap应用程序中使用了一个菜单，因此以webkit为目标，我注意到该菜单会水平扩展文档。 但是如果我换掉，它的位置是相对的或<代码>位置：固定它按照我的预期工作。也就是说，文档不会增长

---

据我所知

位置：绝对
不应该占用文档中的空间，还是我理解

CSS:

HTML:

<div id="navigation"></div>



位置：绝对
从文档流中删除元素，但该元素中的内容仍正常运行。啊，我的理解是否正确：从流中删除意味着其他元素可以占用为导航留出的空间#导航仍然会影响文档/视口（这是正确的术语吗？），因为它具有宽度/高度，只是定位与其他元素是分开的？位置：relative在文档中已经有了它的空间，并且单独移动，这就是为什么？位置：固定与设置的位置相同，当使用“平移”时，它仍然占据相同的空间，但不可见？这有点像你将页面打印在魔术纸上。当你用绝对位置剪切一个元素时，就好像你用剪刀把它从魔法纸上剪下来，然后通过移动“较低”的区域来填补缺口来修复这个洞。嗯，我理解这一部分。我对定位如何影响文档的其余部分感到困惑。但是我注意到，在这个例子中，
translate
的行为与
正确操作是一样的：-100%
，所以我只是对绝对和定位的工作原理感到困惑。谢谢你的帮助！：）
<div id="navigation"></div>