由于平时不太用到，所以过去写css的时候对于position属性的absolute、 relative值理解比较模糊，对于z-index的层叠更是摸不着头脑，除了理解的因素外，各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档，总算是对盒模型的浮动、定位有了比较深刻的理解。
我们在实践中很有可能遇到这样的问题：
1、做一个横向导航，然后鼠标经过之后出现下拉菜单，那么这个下拉菜单的位置控制就是一个关键；
2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示，这时既不想让气泡提示破坏正常的文档布局，又不想气泡提示的定位在不同的浏览器中到处乱飘。
3、当我们在一句正常的文本中插入一个小图标的话，一般会使用<img />标签，而这时它的垂直居中问题又是让人困惑，无论你使用html属性absmiddle、或是使用css属性vertical-align、抑或是使用父对象的heigh + line-height，在不同的浏览器中总会看起来不同。
嗯，上面几个问题你是否也遇到过呢？如果你至今还没有一个很好的解决办法，不妨继续阅读此文，或许能对你有所帮助：）
我们先看一下position属性的几个取值定义：
position: static、absolute、relative
static : 默认值。如果没有指定position属性，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。
如下图所示，这是一个常见的指定了float:left;的横向导航：
[1]
