本文主要介绍CSS中的定位以及初始包含块的概念。
定位（position）
CSS定位 position 属性有四个值，分别是
- static：默认值，不开启定位
- relative：相对定位
- 定位偏移量相对于元素自身在文档流中的位置，相对定位不脱离文档流。
- absolute：绝对定位
- 有开启了定位的祖先元素，则定位偏移量相对于定位祖先元素
- 没有定位祖先元素，定位偏移量相对于初始包含块。（并不是html或body元素，初始包含块可以理解为页面顶部可视区域，如果页面有滚动区域，滚动区域不属于初始包含块）
- fixed：固定定位
- 定位偏移量相对于浏览器可视窗口
包含块
对于浮动元素，其包含块定义为最近的块级祖先元素。对于定位，情况则没有这么简单。
“根元素”的包含块（也称为初始包含块）由用户代理建立。在 HTML 中，根元素就是 html 元素，不过有些浏览器会使用 body 作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形。
对于一个非根元素，如果其position值是relative或static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成。
对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型）。这个过程如下：
- 如果这个祖先是块级元素，包含块则设置为该元素的内边距边界，也就是由边框界定的区域。
- 如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边距。
- 如果没有祖先，元素的包含块定义为初始包含块。
