Position的意思比较多，我理解成定位，就是用于给块来安排位置用的，一个块怎么放，放哪里，什么方式，当块内的内容超出了块定义的宽和高后怎么个表现方式（是覆盖其他块，还是被其他块覆盖）等，都是可以定义的。定位用的属性有四个：top, bottom, left, right，就是上下左右了，但必须是先定义了定位的方式，这四个属性才会起作用，否则无效。属性具体的效果也根据定位方式的不同而有差别。
Position的方式：Static/Fixed/Relative/Absolute，按照字面意思翻译就是静态/固定/相对/绝对，我是这么翻译的。下面就一个一个唠叨一下。
Static：HTML的元素，缺省情况下都是这个定位方式， A static positioned element is always positioned according to the normal flow of the page.这句英文我确实不知道怎么翻译才好，尤其是最后的页面的标准流这个概念，我理解是页面的逐行方式，页面的自然位置安排。由此可知，默认情况下，定位的方式是static，所以上面说的的四个属性top, bottom, left, right是没有的，即便是你定义了值也是和没定义一样。暂且咱就把这种状态称作一个块的原始状态。
Fixed：这个固定，是相对于浏览器窗口而言的，如果一个块被position:fixed，那这个块的位置的宽高的起点是浏览器显示网页内容区域的左上角，具体显示的位置是你定义的top, bottom, left, right的值。同时，这个块是不会随着浏览器的滚动条滚动发生位置变化的，说白了，这块就已经被钉死在那里了。所以这个fixed方式一般是用作页面上浮动面板，导航等等需要固定位置显示的内容用的。
Relative：相对定位，这里的相对，是说的相对与这个元素本身在Static方式时的位置，就是上面说的原始状态，下看下图：
图中有9个块，假如都是按照static状态排列的（实际可能不可能，只是为了说明问题），用中间的编号为5的块来举例，现在把5这个块的position:relative;top:100px;left:100px之后，块的位置会发生变化，变化见上图，其中的top和left的起点是该块原始位置的左上角标注X的地方，位置变化后，块的左上角同样我标注了一个X，这样就好理解位置是如何发生变化的了。既然位置发生变化了，是要和其他块发生位置重叠的，图中的块5和块6、8、9产生了位置重叠，这样就有个块内容谁覆盖谁的问题，也就是哪个块显示在上，哪个在下。假如9个块是按照编号依次放置，那后放置的会覆盖前面块的内容，这个我在图中没有表示出来，按照前面说的都是按照static状态排列的话，块5位置变化后，和块6、8、9重叠的部分，应该是被块6、8、9的内容覆盖的，这个实验留给你自己去体会吧。当然，你要是不想让块6、8、9的内容覆盖块5的内容，可以给块5指定一个大于块6、8、9的z-index的值，这个z-index的值用于控制各个块在垂直于屏幕的方向上的显示顺序，类似于Photoshop里层的概念，就是哪个块在上面，哪个块在下面。如果都没有指定，那就按照块的自然顺序，越靠后的块会覆盖前面的块。
Absolute：绝对定位，这里说的绝对是说对于一个块的父级元素、父级块而言的，如果没有父级元素、父级块，那默认的父级块是<html>，同时父级元素、父级块必须是除static之外的position定位方式，也就是父级块、父级元素需要有position为Fixed/Relative/Absolute的定位方式才有效。如果一个合适的父级都没找到，那父级块就又成了<html>了。用下面我写的代码测试一下吧，先直接点击运行代码按钮查看效果，修改了值以后再次点击运行代码按钮看看修改后的效果：
