總結·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屬性值。

 

二、屬性值詳細介紹

首先設置示例的顯示內容，分別設定了三個div塊元素，並分別設置class屬性值。HTML源代碼如下：

<div class="div0">
    <div class="div1 div">This is div1.</div>
    <div class="div2 div">This is div2.</div>
    <div class="div3 div">This is div3.</div>
</div>

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

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

最終的示例效果圖如下：

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

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

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

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

可以看到如下效果圖中，第一和第三塊div塊並沒有移動位置，說明relative屬性值使元素遵循默認的文檔流。設置偏移量后，第二塊div塊則向右、向下分別偏移50px。

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

當設置左偏移量為-50px時，則如下圖所示，第二元素塊向左偏移了50px。

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

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

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

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

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

可以從圖中看到，第三塊div元素向上移動，第二塊元素脫離了原來的文檔流。而在沒有設置該元素的父元素的position值為非默認值時，第二塊div元素塊是相對於body的值來向右、向下偏移的。

 再來看設置了該元素的父元素的position值為非默認值的情況。

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

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

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

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

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

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

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

 三、Z-index

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

舉個栗子*4：將relative示例的元素設置-index值為-1。

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

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

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

使用無序列表和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中設置元素位置的重要方式之一，使用該模型可以實現頁面常用的菜單導航、懸浮公告等效果。