探究CSS系列 --- 定位

文档流

文档流简单的理解就是HTML中的元素按照代码的先后顺序以从左到右，从上到下的顺序排列，一个接一个的排列，也就成为了一个流stream，每个元素都在文档流中都占据一定的大小、空间，改变一个元素的布局会直接影响其他元素的布局。

而浮动与定位中的绝对定位都会使元素脱离文档流，什么意思呢？就是说如果一个元素被设置了浮动或绝对定位属性，那么这个元素好像脱离HTML文档一样，而其余的元素重新按照正常的文档流排列。

定位

定位：元素默认的定位方式是position:static;当设置了position:relative; position:fixed;或者position:absolute;时，我们说元素是被定位了的。

静态定位

当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。
一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。
left,top属性对static没有效果，static是靠margin这些定位的。

相对定位

相对定位(position:relative;)的元素，即相对于元素在文档流中位置进行偏移. 但保留原占位，会拉伸（注意了是基于文档流位置， 相对定位是相对于它在文档流中的原先位子定位。）
它偏移后的元素不会对其他元素的layout产生影响（会遮挡其他元素）

绝对定位

绝对定位(position:absulote;)的元素，是以离它最近的被定为的祖先元素为基准的，绝对定位会使元素脱离文档流，它的layout将不会对其他元素的产生影响，而其他的元素重新按照正常的文档流排列。
绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。
一个元素，无论是display:block;还是inline-block还是inline，只要设置了绝对定位，那么它将表现为一个绝对定位元素，绝对定位的定位层在未进行绝对定位的元素之上。可以设置width、height，不会拉伸但是会自动包裹。通过绝对定位可以将元素定位到其他元素的上面或者上面，从而实现首字母下沉、文本替换等效果。

固定定位,

固定定位(position:fixed;)的元素，是以屏幕为基准的
完全脱离文档流, 相对于视区进行偏移.
和绝对定位很相似
固定定位是相对于屏幕而绝对定位的基准则是父级元素

嵌套定位

这是一个嵌套的DIV，一个父Div Parent，包含了一个子Div Sub

<div id="parent">
     <div id="sub">
     </div>
</div>

这里我们要弄清楚两个问题：

子Div的定位基准是谁？
子Div的定位点从哪里开始？

子Div的定位对象

如果子Div是固定定位，则定位基准是body
如果父Div是默认定位且子Div是绝对定位则定位基准是body
如果父Div是相对定位或者绝对定位则子Div的定位对象是父Div

子Div的定位点

如果子Div是固定定位或绝对定位（脱流定位），如果子Div设置了left和top，则设置了的方向不受父Div的margin，padding，border影响，未设置的方向受父Div的margin，padding，border影响。
如果子Div是相对定位，则受父Div的margin，padding，border影响