creeperyang
commented
9 years ago 1. position: absolute的 containing block 问题
position: absolute的元素的包含块（containing block） 总是最近定位的祖先元素（nearest positioned ancestor）所在的包含块。所谓定位，即position是relative, absolute, fixed。
如果没有最近定位的祖先，那么包含块就是 initial containing block 。问题的难点就在谁是 initial containing block ？
在我的（可能包括很多人）潜意识里，initial containing block显然就是<body>。可以看个例子：
<body>
<style>
body{height: 200vh; background-color: green;}
.demo{position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: yellow;}
</style>
<div class="demo"></div>
</body>可以看到，背景黄色的.demo占满整个窗口。调整body高度，.demo的高度始终不变，即跟<body>无关。所以<body>不是 initial containing block 。然后<html>是么？是（html所在的包含块）：
http://www.w3.org/TR/CSS2/visudet.html#containing-block-details:
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.
概念有点晦涩，就屏幕媒体而言，
initial containing block是一个长方形，尺寸和视口（窗口，window）一致，定位于画布（绘制整个文档的canvas，不要与<canvas>元素混淆）的起点。 可以看作（但不是）没有滚动时的窗口。
所以我们可以看到例子中.demo恰好铺满窗口，不论<html>/<body>怎么变动。
为什么通过position: absolute; top: 0; bottom: 0;来确认initial containing block？
当同时指定绝对定位元素的top和bottom，且height没有指定，或者是auto/100%，那么top和bottom都会起作用，指定对包含块的上下距离。通过这个原理，我们在以上例子中，调整body高度而.demo的高度不变，确认body不是initial containing block。
今天遇到并讨论了一个CSS相关的问题，很有意思，并更正了我的某些错误概念。想以问答的形式记录下，发现只有 JavaScript问题集锦，于是干脆就新开了一个issue，以后所有的HTML与CSS相关问题都记录在这里。