文档流
文档流简单的理解就是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影响