[CSS] containing block

（1）Content Edge and Padding Edge
The content edge of a box is defined by the outer limits of the content area—it doesn’t include any padding that may exist outside the content.

The padding edge of a box is defined by the outer limits of the padding area—it doesn’t include any borders that may exist outside the padding. If a box has no padding, the padding edge is equivalent to the content edge.

（2）initial containing block
The containing block for the root element is called the initial containing block, and has the same dimensions as the viewport for continuous media (such as the screen) and the page area for paged media (such as print).

（3）rules
The containing block for any other element box is determined by the value of the position property for that element.

a)
If the value of the position property is static (the default) or relative, the containing block is formed by the <u>edge of the content box</u> of the nearest ancestor element whose display property value is one of:

block
inline-block
list-item
run-in (only in a block formatting context; see Formatting Concepts)
table
table-cell

b)
If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the <u>padding edge</u> of that ancestor.

c)
If the value of the position property is fixed, the containing block is the <u>viewport</u> (for continuous media) or the page box (for paged media).

例：

html,body,.box1,.box2{
    margin:10px;
    padding:10px;
    border:10px solid;
}
.box2{
    position:absolute;
}

可以看到：
position:absolute;的元素，虽然脱离了文档流，但是还是在原来该出现的位置（left,top）
margin的外边界，仍然位于本来该出现的位置处。

我们可以设置元素的top和left样式，来指定元素相对于它的containing block的位移。

例：
（1）未指定包含块，以html的<u>margin外边界</u>为边界。

.box2{
    left:0;
}

（2）包含块是html，以html的border内边界为边界。

.box2{
    left:0;
}
html{
    position:relative;
}

（3）包含块是body，以body的border内边界为边界。

.box2{
    left:0;
}
body{
    position:relative;
}

（4）包含块为.box1，以.box1的border内边界为边界。

.box2{
    left:0;
}
.box1{
    position:relative;
}