absolute: 元素脱离文档流，“几乎”独立了。位置通过top, right, bottom, left来设置，当然，参照基点是包含元素的父元素~绝对定位的元素对相邻元素的定位没有任何影响，相互之间的层叠关系是通过z-index来设置的，同时，绝对定位元素的margin之间也不会发生折叠。
fixed: 这是个比较有趣的值。它的定位计算方式和绝对定位是一样的，但是也有不同。元素的位置一旦确定了，在屏幕显示器上，它会保持固定不动，在印刷媒体类型上，它会在每页出现在固定位置，在其他的媒体类型上，表现方式则没有定义。不过，如果希望一个box在屏幕和印刷媒体上的表现不同的话，可以使用@media rule的方式，例如：
CSS Code复制内容到剪贴板
@media screen {
h1#first { position: fixed; }
}
@media print {
h1#first { position: static; }
}
还有一个inherit值，不用多说，就是从父元素继承position值了。
三、定位方式：top, right, bottom, left
这四个属性其实可以放在一块儿说，其实是差不多的，只是定位的相对基线变了而已。文档上的说明有些啰嗦了，不过that’s what official document is对吧？
可设定的值为：length, percentage, auto, inherit
不论设定的值为什么，意义都是元素的上右下左距离父元素的上右下左的边距。
这里要提一下auto值，对于非替换元素(non-replaced elements)和替换元素(replaced elements)auto的表现是不一样的，非替换元素指的是浏览器根据标签的元素和属性来判断具体显示的内容，如：
XML/HTML Code复制内容到剪贴板
<input type="text" />
这是一个文本输入框，换成其他的属性的话，浏览器的显示就会不一样。
替换元素的例子：
XML/HTML Code复制内容到剪贴板
<p>I’m classicemi</p>
(X)HTML的大多数元素都是非替换元素，他们将内容直接告诉浏览器，浏览器再显示出来。
下面回到auto上来，对于非替换元素，auto值的效果取决于哪些相关的属性同样具有auto值，比较难理解是吗，好的，我们给出下面的例子：
CSS Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<title>A frame document with CSS 2.1</title>
<style type="text/css" media="screen">
body { height: 8.5in }
