遵循由简入易的原理，我先从手动变速箱的原理开始说起。

上图是一个 Mercedes-Benz C-class 两门跑车的六档手动变速箱。看上去，除了看到一大堆复杂的零件，每一个都不知道有什么用，但如果把它简化一下，就容易明白了。

一辆汽车的动力系统工作原理大概就是这样：首先 engine (发动机) 把动力通过 clutch (离合器) 输入给变速箱，变速箱通过不同的档位把动力转给 drive shaft，最后 drive shaft 推动轮子的转动。当然还要为每个轮子的动力进行分配，也就是上图中的 differential，但那跟变速箱的工作原理就没什么关系了。

变速箱是个封闭的空间，我们把它拆开来研究一下。

这个图很简单，但是很明白地解释了手动变速箱的工作原理。这个图的关键是，要明白金色的轴连接的是车轮，在发动机运转时，而 collar 没有跟任何一个蓝色的齿轮咬合的情况下，金色的轴是不转的，因此车轮也不转。这个时候变速箱挂在空档上。如果 collar 跟其左右的任意一蓝色齿轮咬合，都将带动金色轴的转动也将带动车轮的转动。所以 collar 也是一个关键的部件，它往哪个蓝色的齿轮上靠，决定了汽车行驶在几档上。

我们来看一个完整点的手动变速器。

图中圆圈中的数字分别代表了 collar 与之咬合后汽车行驶的档位。不难看出，从一档到五档，齿数比依次减小。说到这里，解释一下齿数比的概念，齿数比就是主动齿轮和从动齿轮的齿数的比值。这就可以解释两个问题（我自己之前的疑问）：1. 为什么低档时，汽车的“劲”大。2. 为什么低速挂低档省油，高速挂高档省油。

第一个问题的解释如下，齿数比越大，扭矩越大，汽车越有“劲”。至于为什么齿数比越大，汽车越有“劲”，可以用数学方法证明，我就不写在这里了，感兴趣的朋友可以跟我交流。第二个问题，因为功率=力x速度，扭矩=力x力矩，那么在力矩不变的情况下（也就是在车轮大小不变的情况下），我们可以把工式里的“力”=“力矩”。低档位的时候，扭矩较大，速度较慢。反之亦然。

以上是手动变速箱的基本工作原理，还有一些譬如同步器和倒档没有记录下来，其实原理并不复杂，了解到基本的知识这些都很好掌握。

评论：

• December 7, 2009, Summer schreibt: 正在学车 很纳闷离合到底作什么用 师傅说是变速用的 但是为什么一开始就要踩 于是百度到您这里啦 ^_^
• December 7, 2009, Michael schreibt: 希望能帮到您！
• January 2, 2010, cc9007 schreibt: 一开始我只是把手动变速箱理解成变速自行车，上坡时候用大齿轮对大齿轮，速度快了可以换成小齿轮，你的这个讲的更清晰

Hoofei.com 上有个简短的解释，不过正因为有点太简短，我看了以后还是犯糊涂。放狗搜了一下，发现几篇文章比较好，苦苦研究后，终于开悟。

下面我做一个总结：

Static 属性：

1. Static 属性是每个元素的默认属性，也就是说，如果你没定义 position 的属性，那么 position 的属性就自动是 static。
2. 主要用来 override 其它三个属性。

Relative 属性：

1. 从目前的位置的偏移量。
2. 这个属性相对地移动元素，但并不把该元素拿出 page flow, 因此移动后，原占据的位置依然存在。换句话说，原位置会显示为空白。
3. Relative 属性可以控制其子容器的 Absolute 属性的显示。

Absolute 属性：

1. 用的最多的属性。
2. 不像 relative, 有 absolute 属性的元素不属于 page flow, 也就是说，相对于 relative, 它并不在页面上占据位置，可以在有效的范围内自由移动。
3. 重要：absolute 的移动范围是受限于最近的一个拥有 position 属性的母容器，但不包括 position 的属性是 static 的母容器。举个例子，如果：
   div-1 {position:relative; width:200px; height:200px}
div-2 {position:absolute; top:0; right:0}
   div-1 是 div-2 的母容器的情况下， div-2 就会出现在 div-1 内的右上角处而不是很多人认为的整个屏幕的右上角处。如果 div-1 中 position 是 fixed, div-2 出现的位置也是一样的。
4. 如果拥有 absolute 属性的元素的母容器中没有设定了 position 的，那该元素则自动属于“初始容器 (initial containing block)”，至于这个初始容器是怎么定义的，按 CSS 标准的说法是，完全取决于各个浏览器了。但一般来说，是指 Body 或是 HTML 元素。

Fixed 属性：

1. 该属性跟 absolute 的特点一样，除了…
2. 有该属性的元素会固定在指定的位置，不随着屏幕的滚动而滚动。如果你不理解 fixed 属性是怎么工作的，可以看看 voivo.de 的效果。
3. 重要：IE 不支持该属性。可以用 IE 和 Firefox 浏览 voivo.de 比较一下。

最后，使用 position 属性是还有几点要注意：

1. 如果你的 relative 属性的 width 为一个相对值（比如50%），IE 的 bug 会把宽度计算成该元素的母元素的宽度而不是该元素本身的宽度。
2. 如果你为 absolute 属性设定了一个 width，不管是相对 (e.g. 35%) 还是绝对 (e.g. 450px) 值，按照 CSS 标准，这时该元素的位置应该由最近的定义了 position 的容器决定（本文前面提到过），但 IE 和 Opera 都会错误地把该元素的位置直接交给了上一级的容器来决定。到目前为止，只有 Gecko 引擎的浏览器（比如说 Mozilla 的浏览器）才能按标准正确的解释。
3. 最好为 absolute 属性设定 margin, padding 的值，因为浏览器对 margin 和 padding 的解释各不相同，这样做可以保持网页的兼容性。

参考文章：
Relatively Absolute
Learn CSS Positioning in Ten Steps
The position declaration

可能相关的文章：

• 订阅本blog