position定位

    定位：元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

（一）相关背景知识

    页面上的元素其实都可视为“框”。对应两个基本概念：

（1）块级元素（block）：显示为一块内容，即“块框”。一个块级元素会新开始一行并且尽可能撑满容器。常用的块级元素包括：div, p, form, ..., 以及HTML5中的新元素——header, footer, section等。 

（2）行内元素（inline）：一个行内元素可以在文字段落中<span>像这样</span>包裹一些文字而不会打乱段落的布局。常用的行内元素有：a, span, strong等。

    可以使用 display 属性改变“框”的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。（from www.w3school.com.cn/css/css_positioning.asp）

Tips: display:none 常用在JS中在不删除元素的情况下隐藏它，且该元素被隐藏后不会占据其本来应该显示的空间（即不可见也不可摸）；而 visibility:hidden虽然同样不可见，但实际上还会占据空间（即不可见但可摸）。

---

（二）position: static    relative    fixed    absolute

（1）static：默认值。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。设置position:static; 的元素不会被特殊定位。so easy.

（2）relative: 相对定位，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。其他元素不会受该元素影响而改变位置。

(相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。)

CSS写法 效果

（3）fixed: 固定定位，会使元素相对于视窗来定位，即使页面滚动，还是停留在相同的位置（就像粘在屏幕上的口香糖，这么说好像有点小恶心-_-）。一个固定定位元素不会保留它原本在页面中应有的空间（即脱离文档流）。

移动浏览器对 fixed 的支持差，相应解决方案参见http://bradfrostweb.com/blog/mobile/fixed-position/

（4）absolute: 绝对定位，最麻烦的position值。absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于 最近的“positioned”祖先元素。如果绝对定位的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。（一个“positioned”元素是指 position 值不是 static 的元素)。

元素框从文档流完全删除，并相对于其包含块定位（最近的“positioned”祖先元素）。包含块可能是文档中的另一个元素或者是初始包含块（ body 元素）。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。（from www.w3school.com.cn/css/css_positioning.asp ，斜体内容为笔者补充）

CSS设置 效果（上图红色div的父元素是绿色div）

    最后一个较为完整的定位技术说明例子见 http://zh.learnlayout.com/position-example.html（在浏览器中按F12，对应查看更有助于理解）