CSS学习之Position属性 - CSS: The Missing Manual

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。总的来说有以下两种情况：

A tag is positioned relative to the browser window if it has an absolute position and it’s not inside any other tag that has either absolute, relative, or fixed positioning applied to it.

A tag is positioned relative to the edges of another element if it’s inside another tag with absolute, relative, or fixed positioning.

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

该属性下，元素完全从正常的流中分离出来，在流中的其它元素根本不知道它的存在，因此很可能被absolute的元素覆盖。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

relative的使用，会使元素原本的位置留下空缺

relative常常用于父元素，以使它的子元素可以以它的位置来进行绝对定位。例:

h1 { position: relative; }

h1 img {

position: absolute;

top: 0;

right: 0;

}

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定.

与background-attachment类似，在屏幕的固定位置，不随滚动条移动。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

“left”, “top”, “right” 以及 “bottom” 属性

通常使用left和top来确定元素的位置。也可以同时使用left和right或者同时使用top和bottom而不设定宽度高度，来使浏览器确定元素的height和width。

z-index

通常情况下，z-index遵循html代码里元素的顺序。z-index越大，元素越在上层。改变z-index时，正负和大小都无所谓。