重拾css(11)——position

1.引言

在學習position以前，咱們應該去思考一個問題：什麼狀況下咱們須要定位？若是沒有定位將沒法知足咱們怎樣的需求？咱們要知道，被人類創造出來的每個知識，都有它的用途，都要解決一些以前遇到的問題。

若是沒有定位，咱們作出來的網頁將會是循序漸進的自上而下、自左而右的平鋪在瀏覽器上，外加經過margin和padding調整一下間距，還有就是經過float來浮動某些元素。作一些簡單的網頁這樣就夠了，例如N年以前的yahoo，雖然如今看來很low。

可是有些狀況下，這種循序漸進的網頁排版知足不了咱們的要求，咱們須要某些元素跑出來，懸浮在網頁上面，並且須要給它指定一個位置。這時候咱們就須要用到了position，並且是非用不可。以下圖：

position一共有五個可選屬性：static / relative / absolute / fixed / inherit。其中static（靜態定位）是默認值，即全部的元素若是不設置其餘的position值，它的position值就是static，有它跟沒有它同樣，而inherit是從父元素繼承position屬性的值。就很少介紹了。

2.relative 相對定位

相對定位relative能夠用一個例子很輕鬆的演示出來。例如咱們寫4個<p>，背景色爲灰，出來的樣子你們不用看也能知道。

<p>html</p>
<p>css</p>
<p>js</p>
<p>jq</p>

而後咱們在第三個<p>上面，加上position:relative而且設置left和top值，看這個<p>有什麼變化。

<p>html</p>
<p>css</p>
<p style="position: relative; top: 10px; left: 20px;">js</p>
<p>jq</p>

上圖中，你們應該要識別出兩個信息（相信大部分人會忽略第二個信息）

1. 第三個<p>發生了位置變化，分別向右向下移動了10px；

2. 其餘的三個<p>位置沒有發生變化，這一點也很重要。

所以，relative會致使自身位置的相對變化，而不會影響其餘元素的位置、大小的變化。這是relative的要點之一。還有第二個要點，就是relative產生一個新的定位上下文，下文有關於定位上下文的詳細介紹，這裏能夠先經過一個例子來展現一下區別：

注意看這兩圖的區別，下文將有解釋。

3.absolute 絕對定位（相對於「定位上下文」）

說到absolute，推薦你們去看一個視頻教程，講師張鑫旭對absolute講的很是透徹，本文的一些內容也是參考了這篇教程，好東西你們一塊兒分享！

先寫一個基本的頁面——4個<p>

<p>html</p>
<p>css</p>
<p>jsjsjsjsjs</p>
<p>jq</p>

而後，咱們把第三個<p>改成absolute，看看會發生什麼變化。

<p>html</p>
<p>css</p>
<p style="position: absolute; background-color: greenyellow;">js</p>
<p>jq</p>

從上面的結果中，咱們能看出幾點信息：

1. absolute元素脫離了文檔結構。和relative不一樣，其餘三個元素的位置從新排列了。只要元素會脫離文檔結構，它就會產生破壞性，致使父元素坍塌。（此時你應該能馬上想起來，float元素也會脫離文檔結構）

2. absolute元素具備「包裹性」。以前<p>的寬度是撐滿整個屏幕的，而此時<p>的寬度恰好是內容的寬度。

3. absolute元素具備「呆滯性」（不讓它動，它就不動）。雖然absolute元素脫離了文檔結構，可是它的位置並無發生變化，仍是老老實實的呆在它本來的位置，由於咱們此時沒有設置top、left的值。

4. absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內容。

最後，經過給absolute元素設置top、left值，可自定義其位置，這個都是平時比較經常使用的了。這裏須要注意的是，設置了top、left值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位。下文立刻會講定位上下文。

最後，再提幾個小知識點。

1. 設置absolute會使得inline元素被「塊」化，這在上一節講display時已經說過；

2. 設置absolute會使得元素已有的float失效。不過float和absolute同時使用的狀況很少；

3. 上文提到了absolute會使元素懸浮在頁面之上，若是有多個懸浮元素，層級如何肯定？答案是「後來者居上」。

4.fixed 絕對定位（相對於「瀏覽器」）

其實fixed和absolute是同樣的，惟一的區別在於：absolute元素是根據最近的定位上下文肯定位置，而fixed永遠根據瀏覽器肯定位置。

上文不少次提到了「定位上下文」，那麼它究竟是一個什麼東東？答案立刻揭曉。

5.定位上下文

5.1 relative的相對定位

relative元素的定位永遠是相對於元素自身位置的，和其餘元素不要緊，也不會影響其餘元素。

5.2 fixed的絕對定位

fixed元素的定位永遠是相對於瀏覽器邊界的，和其餘元素沒有關係。可是它具備破壞性，會致使其餘元素位置的變化。

5.3 absolute的絕對定位

若是爲absolute設置了top、left，瀏覽器會根據什麼去肯定它的縱向和橫向的偏移量呢？

答案是瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。以下兩個圖所示：

可見，定位上下文就是absolute用來定位的「某一層祖先元素」。

此時，再看前面提到的那個圖，應該就能理解了：