總結一下CSS中的定位 Position 屬性

Rising_Sun發表於2013-06-24
CSS

在CSS中，Position 屬性經常會用到，主要是絕對定位和相對定位，簡單的使用都沒有問題，尤其巢狀起來，就會有些混亂，今記錄總結一下，防止久而忘之。

CSS position 屬性值：

  • absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
  • relative：生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。
  • fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。
  • static：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
  • inherit：規定應該從父元素繼承 position 屬性的值。

我們最常用的的就是 absolute 和 relative 兩種方式，所以主要討論著兩者的區別。

relative 相對定位

相對定位我們主要是要知道相對於誰來進行偏移的？其實相對定位是相對於元素自己的本身的位置，我們來看一下例子： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html body
        {
            margin: 0px;
            padding: 0px;
        }
        #parent
        {
            width: 200px;
            height: 200px;
            border: solid 5px black;
            padding: 0px;
            position: relative;
            background-color: green;
            top: 15px;
            left: 15px;
        }
        #sub1
        {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #sub2
        {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="sub1">
        </div>
        <div id="sub2">
        </div>
    </div>
</body>
</html>

這是一個巢狀的DIV，一個父Div Parent， 包含兩個子DIV Sub1 和 Sub2，由於兩個子DIV沒有設定任何Position屬性，它們處於它們應當的位置。預設位置如下圖：

當我們修改一下Div Sub1 的樣式： 

#sub1
{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 15px;
    left: 15px;
}

 結果如下圖：我們會發現Sub1進行了偏移，並不影響Sub2的位置，同時遮蓋住了Sub2，切記偏移並不是相對於 Div Parent的，而是相對於Sub1 原有的位置。

如果我們把Sub1 的同級Div Sub2 也設定一個相對位置，會產生什麼結果？我們來看一下。

#sub2
{
   width: 100px;
   height: 100px;
   background-color: red; 
   position: relative;
   top: 10px;
   left: 10px;                  
}

結果如下圖：

Sub2也根據原有位置進行了偏移，同時遮蓋住了Sub1，也不會影響Sub1的位置。相對定位比較容易理解，我們再來看一下絕對定位Absolute。

absolute 絕對定位

絕對定位在使用當中比較容易出錯的，有幾個需要注意的地方，將上面的程式碼還原，我們為Sub1 增加一個絕對定位。

#sub1
{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 15px;
    left: 15px;
}

結果如下：

我們發現，由於我們對Sub1進行了絕對定位，Sub1的位置發生了偏移，而同級Div Sub2，則佔據了Sub1的位置，並且Sub1遮擋了Sub2.

下面，把Sub2 也增加絕對定位：

#sub2
{
     width: 100px;
     height: 100px;
     background-color: red;    
     position: absolute;
     top: 10px;
     left: 10px;              
}

結果如下：

我們會發現，Sub2 也進行了偏移，並且遮蓋住了Sub1。

這時候，我們會發現問題，兩個子Div 都設定了 絕對定位，他們是相對於哪個元素髮生了偏移呢？

這分兩種情況：

 1、如果Sub1 的父元素或者祖父元素，設定了Position屬性，並且屬性值為 absolute 或 relative的時候，那麼子元素相對於父元素來進行定位。比如我們例子中最外層Div Parent設定了相對定位屬性，因此Sub1 和 Sub2 兩個Div 就根據 Div Parent 來進行定位。但是根據Parent那個定位點進行定位呢？答案是：如果parent設定了margin，border，padding等屬性，那麼這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位。

2、如果sub1不存在一個有著position屬性的父物件，那麼那就會以body為定位物件，按照瀏覽器的視窗進行定位。

我們將例子中的Parent 的Position 屬性刪除，再來看一下結果：

由於兩個子div沒有找到有Position屬性的父元素，則以Body進行定位，由於圖片原因，請不要誤以為是相對於Parent的。

 fixed 定位方式

 fixed是一種特殊的absolute，fixed總是以body為定位物件的，按照瀏覽器的視窗進行定位。我們將程式碼還原到最初狀態，Sub1 增加absolute定位方式，而Sub2 增加fixed定位方式：

#sub1
{
   width: 100px;
   height: 100px;
   background-color: blue;
   position: absolute;
   top: 15px;
   left: 15px;
}
#sub2
{
   width: 100px;
   height: 100px;
   background-color: red;    
   position: fixed;
   top: 5px;
   left: 5px;              
}

結果如下：

會發現Sub2 始終以body 進行定位，而Sub1由於發現Parent 有position屬性relative，則根據父元素進行定位偏移。

注意fixed 在IE 低版本中式不支援的，包括IE6

至於 static 和 inherit 兩種定位，專案中很少用到，static 就是Position屬性的預設值，一般不設定position屬性時，會按照正常的文件流進行排列。這裡就不在贅述。

相關文章