absolute positioning in css

The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block.

MDN关于绝对定位规则的解释

其实我也忘了在哪里看到的，只记得依稀记得有一行字说当一个绝对定位的元素如果祖先元素都找不到定位元素的话，就相对于body定位，以至于很长时间以来我都是这么认为的。

后来在安卓上碰到一个”bug”，但点击输入框唤出键盘时，原本绝对定位的元素竟然浮上来了，此时body高度应该是没变的，而absolute定位的元素表现的竟然像是fixed元素一样。

用移动调试工具确认了下body高度没有问题后，感觉明显不是根据body来定位的，重新看了下MDN，就是上面引用那段话，没提到body而是一个叫initial containing block的东西。

google it.

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The ‘direction’ property of the initial containing block is the same as for the root element.

来自w3c官网

所以和body没什么关系，是根据initial containing block来定位的，对上面的安卓webview中来说，就是相对于viewport定位的。所以唤出键盘时，viewport变化，绝对定位元素会向上浮动。
解决方法也很简单，给body加上相对定位就可以。

1
2
3
body {
    position: relative;
}

这样就不会往上浮了。

所以，报道出了偏差是要负责任的！

参考