9.6 绝对定位（done） - acelan86/css GitHub Wiki
在绝对定位模型中，盒子遵照它的包含块精确的偏移。它被彻底的从正常流中移除（它不会对后面的兄弟产生影响）。一个绝对定位的盒子为正常流中的子节点建立一个新的包含块并且绝对地定位子孙节点。而且，一个绝对定位的元素的内容不会环绕任何其他盒子流动。它们会遮盖其他盒子的内容（或者被遮盖），取决于重叠盒子的层叠级别。
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
本规范中与绝对定位元素（或者它的盒子）的相关的引用说明了元素的“position”属性有“absolute”和“fixed”两个值。
References in this specification to an absolutely positioned element (or its box) imply that the element's 'position' property has the value 'absolute' or 'fixed'.
固定定位是绝对定位的一个子类。唯一的不同在于，对于一个固定定位的盒子，包含块由视窗建立。对于延展媒体（continuous media），当文档滚动的时候固定盒不会移动。从这方面看，它们跟固定背景图片类似。对于页媒体（page media），固定定位的盒将在每一页都重复。需要在每个页面底部的放置一个签名是这个方法是非常有用的。大于页面区域的固定定位的盒子会被裁剪。默认包含块中固定定位不可见的部分不会被打印。
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images. For paged media, boxes with fixed positions are repeated on every page. This is useful for placing, for instance, a signature at the bottom of each page. Boxes with fixed position that are larger than the page area are clipped. Parts of the fixed position box that are not visible in the initial containing block will not print.
作者可以用固定定位创建一个框架-类似演示。考虑下面的框架布局：
Authors may use fixed positioning to create frame-like presentations. Consider the following frame layout:
这个可以通过下面的html和css规则实现：
This might be achieved with the following HTML document and style rules:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css" media="screen">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>