CSS定位属性Position

事实证明，有些东西你一段时间不用就会遗忘….
于是有了这篇笔记

虽然我认为web前端是个坑，我应该是不会入的，不过这也说不定，这篇文来证明我曾经学过…

总览

定位一般指的就是position属性了，一共有五种取值：

relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
static(~~静态定位，~~无定位)
inherit(继承父元素position属性)

元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为static。它其实是未被设置定位的。
元素如果被定位了，那么它的top,left,bottom,right值就会生效，一般常用的定位属性是relative,absolute和fixed
需要注意的另一点是被定位的元素层次(z-index)会得到提高。
inherit一般是很少用到的，这里不提了

文档流概念

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。
内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是 浮动，绝对定位，固定定位。
但是在IE6中浮动元素也存在于文档流中。

relative相对定位

相对于其正常(原来)位置进行定位。它的特点是不会脱离文档流，一张图就能说明一切问题：

它是唯一并没有对周围的元素有任何影响的定位属性！！它依然存在于文档流中。它的位移是根据它在文档流中的原始位置发生的！！

absolute绝对定位

绝对定位是一个非常牛逼的属性，牛逼到，你不知道会发生什么。注意，它的解释是什么——“生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。”
也就是说，它可以相对于各种各样的东西进行定位。除了 static 其他都可以！！！注意！注意！注意！ 是除了！
如果所有层次的父元素是static，也就是无效的，它默认会以文档为定位对象，文档对象(document)不等于窗口对象(window)
一般我们给坐标对象(必须是父级元素)加一个relative属性就可以了，如果不加left、top等属性相对定位没有任何效果，但是可以起到绝对定位参照的作用

fixed固定定位

它是相对于浏览器窗口来说的，同时也是脱离文档流的，不会随滚动条的滚动而发生变化
同样通过top,left,bottom,right来控制位置

总结

position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
position: relative; 相对于自己在文档流中的初始位置偏移定位。
position: fixed; 相对于浏览器窗口定位。
position: absolute; 是相对于父级非position:static 浏览器定位。
如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。

拓展之display属性

每一个元素都有默认的display属性，使用最多的是block, inline和inline-block，不常用的是table-cell。
根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。
它们最大区别是:
block元素可以设置宽度，独占一行。
inline元素宽度由内容决定，与其他元素并列在一行。
常见的block属性元素有：div, h1-h6, ul, li, ol, dl, dd, dt。
常见的inline属性元素有: span, a, em。