CSS定位的一些解释

定位：

position：static | relative | absolute  | fixed

默认值：static

top | right | bottom | left 

初始值为：auto

百分数：对于top和bottom，相对于包含块的高度；对于left和right，相对于包含块的宽度

正值使边界向内偏移，负值会导致向外偏移。

定义：

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于包含块定位。元素原先在文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：元素框的表现类似于absolute，不过其包含块是视窗本身。

具体解释：

1、首先需要解释的是文档流：

官方的解释是The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A。这里有三点：

（1）、A元素的文档流是一个集合（同时也暗含着：文档流是相对于一个元素A来说的）

（2）、这个集合包括了A和以及一些A文档流之类的元素

（3）、并且这些元素的文档流之外最近的祖先就是A（这个意思是说，这些元素的文档流之外的最近的祖先若不是A，那么这些元素就不属于A文档流）//自己的理解

以下用图来说明：

 灰色部分是html文档中的其他部分，A为文档中的一个元素

（1）、A的文档流是一个集合。

（2）、集合中包含A元素和B元素

（3）、但是不包括C元素，因为C元素的最近一个C文档流外的祖先不是A，而是B。

同时文档流有三种：普通流，浮动流，绝对定位流。如果一个元素的文档流是浮动流或者绝对定位流，那么他就会脱离父元素的文档流，而不管父元素是什么类型的文档流。（自己理解得到的，非概念）

2、偏移某个距离，未定位前的形状，所占的空间仍保留：

当position：relative的时候

（1）元素偏移某个距离，是说它会相对于它本身所在的父元素文档流中的位置偏移某个距离，而不论父元素是什么类型的文档流（因为包含块不需要是定位元素，看下文）。

（2）定位前它是块元素或者是内联元素，定位后都不变。

（3）他在父元素文档流中所占的空间仍保留，意思是说及时它相对原来位置偏移了，但是在它的原来位置还有它的形状作为占位符，并且它在文档流中的占的位置大小，也会随着它大小的变化而变化。

3、包含块

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

（2）对于非根元素，若position是relative或static，其包含块有最近的块级框、表单元格、行内快祖先元素的内容边界组成。

（3）absolute的包含块设置为position值不是static的祖先元素（可以是任何类型）。

-------如果祖先是块级元素，包含块则设置为该元素的内边距边界，即边框界定的区域。

-------若是行内元素，包含块设置为该元素的内容边界。

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

4、元素框从文档流完全删除，所占的空间会关闭，定位后生成一个块级框

（1）与relative不同，absolute定位后它的空间会关闭，完全脱离文档流，意思是说当元素成为绝对定位元素类文档流的时候，它就不再是任何元素文档流中的一部分了，原来包含它的文档流的“内容”会减小（若文档流中有背景颜色就会容易发现），但它还是会相对包含块定位，纵然它已经不是包含块文档流的一部分。

（2）定位后，无论原来是行内框，还是块级框，都一律变为块级框。