CSS3中定位模型--position屬性

一、position元素介紹

position屬性規定了元素的定位類型，通過定位，可準確地定義元素相對於其正常位置而應該出現的位置，或者是相對於父元素、另一元素和瀏覽器視窗等的位置。

position屬性包含有5個屬性值，分別為static、relative、absolute、fixed以及inherit。

具體屬性值描述如下表格所示：

屬性值	描述	所屬類別
static	預設值，元素遵循預設的文檔流。
relative	元素遵循預設的文檔流。 相對於元素的原位置進行移動，周圍元素忽略該元素的移動。 需要設定top、bottom、left、right值進行定位。	相對定位
absolute	元素脫離正常文檔流。 相對於包含該元素的第一個非靜態定位的元素進行定位，若不滿足條件，則會根據最外層的window進行定位。 需要設定top、bottom、left、right值進行定位。	絕對位置
fixed	元素脫離正常文檔流。 相對於最外層的window進行定位，固定在螢幕上的某個位置，不因螢幕滾動而消失。 需要設定top、bottom、left、right值進行定位。	絕對位置（固定定位）
inherit	繼承父元素的position值。

設定position屬性只會讓元素脫離文檔流，需要設定位移屬性使元素移動。包括4個位移屬性，分別為top、bottom、left、right。

具體描述如下表格所示：

位移屬性	描述
left	表示向元素左端插入多少距離，正值使元素右移多少距離。
right	表示向元素右端插入多少距離，正值使元素左移多少距離。
bottom	表示向元素下方插入多少距離，正值使元素上移多少距離。
top	表示向元素上方插入多少距離，正值使元素下移多少距離。

位移屬性的值可以為負值，負值時向相同方向移動。一般設定時設定一個或兩個位移量即可。

當元素中設定position為非預設值後，該元素會成為設定位置的元素。在元素變成設定位置後，就成為了最近的絕對位置後代元素的定位參考點，即該元素為設定為絕對位置子項目的第一個非靜態定位的元素。

目前所有主流的瀏覽器都支援position屬性的使用，但注意所有IE瀏覽器均不支援inherit屬性值。

二、屬性值詳細介紹

首先設定樣本的顯示內容，分別設定了三個p塊元素，並分別設定class屬性值。HTML原始碼如下：

<p class="p0"><p class="p1 p">This is p1.</p><p class="p2 p">This is p2.</p><p class="p3 p">This is p3.</p></p>

設定原始樣本的顯示效果，為了容易理解，將body設定為3px的紅色邊框。包圍三個p塊的大p塊設定1px的黑邊框，灰色的背景色以及50%的寬度。三個p塊則設定相同的邊框和100px的高度。CSS原始碼如下：

body {border: 3px solid red;}.p0 {border: 1px solid black;width: 50%;background-color: #f0f0f0;margin: 50px;}.p {height: 100px;border: 1px solid black;margin: 20px;padding: 5px;}

最終的樣本如下：

1、relative——使元素相對於文檔流的位置位移一段距離

元素遵循預設的文檔流，相對於元素的原位置進行移動，周圍元素忽略該元素的移動。需要設定top、bottom、left、right的值進行相對定位。

舉個栗子：設定第二個p塊的position屬性為relative，並且設定位移量為向右位移50px、向下位移50px。

.p2 {background-color: #e0e0e0;position: relative;left: 50px;top: 50px;}

可以看到如下中，第一和第三塊p塊並沒有移動位置，說明relative屬性值使元素遵循預設的文檔流。設定位移量後，第二塊p塊則向右、向下分別位移50px。

.p2 {background-color: #e0e0e0;position: relative;left: -50px;top: 50px;}

當設定左位移量為-50px時，則如所示，第二元素塊向左位移了50px。

2、absolute——使元素相對於文檔流的位置或最近定位祖先元素的位置位移一定的距離

元素脫離預設的文檔流，相對於包含該元素的第一個非靜態定位的元素進行定位。需要設定top、bottom、left、right值進行j絕對位置。

對於元素，使用width、height可以設定它的尺寸，設定百分數是相對於最近定位祖先元素的尺寸。

舉個栗子*2：設定第二個p塊的position屬性為absolute，並且設定位移量為向右位移50px、向下位移50px。注意此時沒有設定該元素的父元素的position值為非預設值。

.p2 {background-color: #e0e0e0;position: absolute;left: 20px;top: 20px;}

可以看到，第三塊p元素向上移動，第二塊元素脫離了原來的文檔流。而在沒有設定該元素的父元素的position值為非預設值時，第二塊p元素塊是相對於body的值來向右、向下位移的。

再來看設定了該元素的父元素的position值為非預設值的情況。

.p0 {border: 1px solid black;width: 50%;background-color: #f0f0f0;margin: 50px;position: relative;}

當設定了該元素的父元素的position值為非預設值的情況時，此時的第二塊p元素塊則是相對於包含三個元素塊的大p元素塊來進行向右、向下的位移。

3、fixed——使元素相對於視口位移一定的距離

元素脫離預設的文檔流，相對於最外層的window進行定位，固定在螢幕上的某個位置，不因螢幕滾動而消失。需要設定top、bottom、left、right值進行定位。

舉個栗子*3：設定第二個p塊的position屬性為fixed，並且設定位移量為向右位移20px、向下位移200px。

.p2 {background-color: #e0e0e0;position: fixed;right: 20px;top: 200px;}

看出，第二個p元素塊的位置在右下角，是相對於視口進行了向左20px、向下200px的位移。並且在頁面滑動時，也會保持著同樣的位置不變。

三、Z-index

Z-index可用於設定元素之間的層疊順序。只對於定位元素有效，即只對於position屬性的屬性值為absolute、relative和fixed有效。靜態定位元素按照文檔出現順序從後往前進行堆疊。設定位置元素忽略文檔出現順序，根據z-index值由小到大的順序從後往前堆疊，即Z-index的值越高表示元素顯示的順序越優先。設定為負值z-index的設定位置元素位於靜態定位元素和非設定位置浮動元素之下。z-index值不必為連續值，其預設值為auto。當設定的值相同時，後載入的元素優先顯示。

舉個栗子*4：將relative樣本的元素設定-index值為-1。

.p2 {background-color: #e0e0e0;position: relative;left: 50px;top: 50px;z-index: -1;}

可以看到，當元素的z-index設定為負值時，設定位置元素是位於靜態定位元素之下，即是di第二個p元素的父元素p0的位置之下。

四、實際應用——使用絕對位置顯示二級菜單

使用無序列表和Flex布局導覽列菜單，HTML原始碼如下：

<ul class="MenuWrap"><li id="ListItem1"><a href="#" class="ListItem" >Home</a><ul class="MenuWrap2" id="MenuWrap2"> <li><a href="#" class="ListItem2">Item1</a></li><li><a href="#" class="ListItem2">Item2</a></li><li><a href="#" class="ListItem2">Item3</a></li></ul></li><li id="ListItem2"><a href="#" class="ListItem">About</a></li><li id="ListItem3"><a href="#" class="ListItem">Products</a></li></ul>

將包裹二級菜單的ul元素設定的position屬性設定為非預設值relative。再將二級菜單的position屬性設定為絕對位置，根據一級菜單的高度設定位移量。並且將二級菜單的顯示方式display屬性設定為none值表示不顯示。最後再通過JavaScript設定滑鼠懸浮經過一級功能表列時顯示二級功能表列。CSS原始碼如下：

.MenuWrap {background-color: #f0f0f0;min-height: 2.75em;display: flex;align-items: center;list-style-type: none;position: relative;}.ListItem {color: black;text-decoration: none;padding:0px 20px;}ul.MenuWrap2 {padding: 0px;}.MenuWrap2 {list-style-type: none;background-color: #f0f0f0;min-width: 4.5em;text-align: center;position: absolute;top: 2.75em;display: none;}.MenuWrap2 li {padding-bottom: 5px;}.ListItem2 {color:black;text-decoration: none;}

最後的如下：

五、總結

元素的定位模型中需要區分每個屬性值的不同定位方式，分為絕對位置、相對定位、固定定位以及預設定位和繼承父元素。其中絕對位置和固定定位都脫離原本的文檔流，而相對定位則遵循原本的文檔流。設定元素的定位方式後，還需要指定位移量。可以從上、右、下、左四個方向進行位移。並且可以利用Z-index屬性設定元素之間的層疊順序。

定位模型是在CSS中設定元素位置的重要方式之一，使用該模型可以實現頁面常用的菜單導航、懸浮公告等效果。