为什么这个文档与position一起水平增长：absolute和transform：translate？

Question

我有一个在PhoneGap应用中使用的菜单，因此定位到webkit，我注意到following code(jsfiddle)水平增长了文档。 但是，如果我换掉它position: relative;或position: fixed;，它就像我期望的那样工作。即文件没有增长。

根据我的理解，position: absolute不应占用文档中的空格，或者我理解this explanation of it wrong?

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>