html - 为什么这个文档随着 position: absolute 和 transform: translate 水平增长？

Question

我有一个在 PhoneGap 应用程序中使用的菜单，因此针对 webkit，我注意到以下代码（jsfiddle）水平扩展了文档。但是，如果我换掉它，position: relative;或者position: fixed;它按我的预期工作。即文件没有增长。

据我了解position: absolute不应该占用文档中的空间，还是我对它的解释有误？

CSS：

#navigation {
    background-color: red;
    height: 100%;
    width: 40%;

    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;

    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

HTML：

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