定位的那些事

定位的类型

通过position属性，可以选择四种不同类型的定位：static    relative   absolute   fixed  ;

应用于所有元素，无继承性。

static : 块级元素生成矩形框，行内元素生成行内框，处于正常文档流中。

relative：元素相对自身偏移某个距离，仍保持定位前的状态，处于正常文档流中，原本所占的空间仍保留。

absolute：完全脱离文档流，相对于其包含块定位。元素在正常文档流中所占的空间关闭，仿佛不存在一样，生成块级框无论原来何种类型框。

fixed：与absolute类似，不过其包含块为视窗本身。

包含块的概念

css2.1定义了以下行为

1 根元素（html）的包含块为初始包含块，是一个视窗大小的矩形。

2 对于非根元素，如果其position的值是static或relative，包含块由最近的块级框，表单元格以及行内块级祖先元素的内容边界构成。

3 对于非根元素，如果position的值为absolute，包含块设置为最近的position的值不是static的祖先元素（可以是任何类型）。

如果祖先元素为块级元素，则包含块设置为由边框界定的区域。（没有设置偏移属性为内容边界）。

如果祖先元素为行内元素，则包含块设置为该祖先元素的内容边界。

如果没有祖先，元素的包含块定义为初始包含块。

注意：元素可以定位到其包含块的外面，这说明，包含块一词实际上应该是“定位上下文”。

偏移属性

top   right   bottom    left    初始值为auto。

应用于定位元素

top和bottom的百分数相对于包含块的高度计算

left和right的百分数相对于包含块的宽度计算。

正值会导致向内偏移，使边界朝着包含块的中心移动，而负值导致向外偏移。

所有浏览器使用外边距边界来完成偏移计算。

即元素的所有一切（外边距，边框，内边距和内容）都会在定位过程中移动，这些会随着定位元素一直保留，并包含在偏移属性定义的区域内。

注意：偏移属性定义了距离包含块相应边的偏移，而不是距离包含块左上角的偏移。

对于auto没有定义行为，为初始值。

包含块和绝对定位元素

1 定位元素不会流入其它元素的内容，反之亦然。这说明，定位元素可能覆盖其它元素或者被其它元素覆盖。

2 通常会选择一个元素作为绝对定位元素的包含块，将其position的值定义为relative，而且没有偏移。

3 元素绝对定位时，还会为其后代元素建立一个包含块。即为子定位元素的包含块。

4 如果文档可滚动，绝对定位元素会随它滚动。其原因是定位元素最终会相对于正常流中的某一部分定位。

自动边偏移

除bottom外，其他偏移属性设置为auto或不设置偏移属性，定位元素会定位在其未定位前的位置。静态位置：元素在正常流中原来的位置。

注意：由于它已经定位，其正常流空间关闭，导致定位元素与正常流元素重叠覆盖。