一、定位基本原理

對于前端開發工程師來說，編寫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(>﹏<)o）。

二、position屬性詳解

在CSS 2.1中，元素的定位方式是由position和display屬性共同作用所決定的，我們先來看position屬性

position屬性的可取值：static | relative | absolute | fixed | inherit

默認值：static

每個值的意義：

static: 常規方式定位box，此時設置top, right, bottom, left屬性是無效的。

relative: 元素本身的的位置的定位方式和static是一樣的，但是實際位置會相對于原位置有所偏移，是通過top, right, bottom, left的設置實現的。注意：display設置為table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell和table-caption的元素是無法應用position: relative的，這也很好理解，這些表格類元素如果會相對于正常位置偏移的話不是很奇怪么！