一、定位基本原理

對于前端開發工程師來說，編寫CSS是前端開發工作中必不可少的一個內容，在CSS中的position屬性又是非常重要的一個方面。顧名思義，所謂position，即是對HTML元素定位方式的一種設置。它是CSS定位技術的基石，看似很容易學習，很多的前端工程師也會說自己掌握得很好，但事實上是這樣嗎？作為一個在前端開發的道路上慢慢前行的新人，我不敢這么說，那么就通過這篇文章與大家一起，了解position的奧秘。

首先，既然是CSS中的屬性之一，那么我們就有必要研究一下W3C的CSS文檔，畢竟這才是對此屬性說明最為詳細的地方。在這里要插一句，目前市面上充斥著大量的教學書籍，網絡上也有很多相關的學習資源，其中固然不乏精品，但是會花點時間，認真閱讀官方文檔的又有多少人呢，有的時候，最乏味的往往是最準確的。

好了，話不多說，官方文檔中關于position屬性的內容大致是這樣的：

In CSS 2.1, a box may be laid out according to three positioning schemes:

1、Normal flow

2、Floats

3、Absolute positioning

1. 常規文檔流。包括塊級元素排版，行內元素排版以及對塊級元素和行內元素相對位置的排版。

2. 浮動。在浮動模型中，元素先按照正常文檔流定位，然后從文檔流中移出，根據設置向左或者向右盡可能地移動。

3. 絕對定位。元素會完全從文檔流中移出，再根據父元素進行定位。

一個元素如果是根元素，或者有浮動或絕對定位的話，那它就是在常規文檔流之外的，其他情況都是在文檔流之內。文檔中有這么一句：The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A. 有些繞，以我并不深厚的英語能力來翻譯的話，應該是：元素A的flow是由元素A本身以及所有最近的文檔流之外的父元素是A的流內元素所組成的。（翻譯得太慘不忍睹了，求大神指點o(>