CSS定位屬性詳解

最近學習CSS相關知識，定位是其中的一個難點。不瞭解其中細節，有時候在使用的時候會弄得一團糟。本篇文章整理下關於定位屬性的具體理解與應用。

1、簡介

1.文檔流

在介紹postion以前，有必要先了解下文檔流。

簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。HTML的佈局機制就是用文檔流模型的，即塊元素（block）獨佔一行，內聯元素（inline），不獨佔一行。

通常使用margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於佈局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「距離」。

只要不是float和絕對定位方式佈局的，都在文檔流裏面。

表現以下：

<div style="border:1px solid black">div1</div>
    <div style="border:1px solid red">div2</div>
    這是一張圖片
    <img src="test.png">複製代碼

2.position屬性介紹

• static，默認值。位置設置爲static的元素，它始終會處於文檔流給予的位置。
• inherit，規定應該從父元素繼承 position 屬性的值。可是任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 「inherit」。
• fixed，生成絕對定位的元素。默認狀況下，可定位於相對於瀏覽器窗口的指定座標。元素的位置經過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。不論窗口滾動與否，元素都會留在那個位置。但當祖先元素具備transform屬性且不爲none時，就會相對於祖先元素指定座標，而不是瀏覽器窗口。
• absolute，生成絕對定位的元素，相對於距該元素最近的已定位的祖先元素進行定位。此元素的位置可經過 「left」、」top」、」right」 以及 「bottom」 屬性來規定。
• relative，生成相對定位的元素，相對於該元素在文檔中的初始位置進行定位。經過 「left」、」top」、」right」 以及 「bottom」 屬性來設置此元素相對於自身位置的偏移。

無論是哪一種定位，都必須有一個參照物。找對了參照物，就成功了一半。

2、相對定位

relative生成相對定位的元素，相對於其正常位置進行定位。

相對定位完成的過程以下：

• 按默認方式（static）生成一個元素(而且元素像層同樣浮動了起來)。
• 相對於之前的位置移動，移動的方向和幅度由 left、right、top、bottom 屬性肯定，偏移前的位置保留不動。

實例

<style type="text/css">
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
    </style>

    <div id="box1"></div>
    <div id="box2"></div>複製代碼

其中box2中的註釋代碼未生效前，是按照文檔流進行排序呈現。

可是，當註釋代碼取消註釋生效後，就會相對文檔流中應當呈現的位置進行移動。

因此，相對定位的參照物是它自己。

3、絕對定位

絕對定位與相對定位的一大不一樣之處就是，當咱們把一個元素設置成絕對定位，那麼這個元素將會脫離文檔流，其餘元素就會認爲這個元素不存在於文檔流中而填充它原來的位置。絕對定位元素根據它的參照物移動本身的位置，而參照物則須要根據它祖先元素的定位設置來肯定。

所謂根據它祖先元素的定位設置來肯定簡單理解爲：相對於該元素最近的已定位的祖先元素，若是沒有一個祖先元素設置定位，那麼參照物是body層。

實例

以上面的圖形來展現絕對定位的特性。能夠看出最裏層是兩個盒子，外面嵌套了兩層祖先元素。

1.祖先元素沒定位

在祖先元素沒定位的狀況下，使用absolute。

#box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
            top: 30px;
            left: 30px;
        }複製代碼

在這種狀況下，參考物就是body。

2.祖先元素有定位

祖先元素只要設置了值不爲position:static以外的值，都視爲有定位，而且最近的祖先元素會被設置爲絕對定位元素的參照物。

#orange {
            width: 400px;
            height: 400px;
            background-color: orange;
            position: absolute;


        }
        #box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
            top: 30px;
            left: 220px;
        }複製代碼

在這種狀況下，參考物就是最近的祖先元素。

除了上述兩種狀況外，在用戶沒給absolute元素設置left/right、top/bottom的狀況下，所對應的參考物會有變化。

3.未設置left/right、top/bottom

在沒設置left/right、top/bottom的狀況下，absolute元素的位置就是該元素在文檔流裏的位置

#box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
        }複製代碼

上圖能夠看出兩個盒子重疊了，這是由於：absolute元素因爲沒有設置left/right、top/bottom就按照其應該在文檔流中出現的位置進行定位，而absolute元素脫離文檔流，紅色的盒子元素並不知道absolute元素的存在，就繼續放置在該位置，而且absolute元素會覆蓋正常文檔流中的元素。

4、總結

主要介紹了相對定位和絕對定位，其餘定位方式比較簡單，試一試就知道了。另外，相對定位和絕對定位的應用也比較靈活，適用於多種場景。