使用CSS中position屬性的定位方法說明

這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點講解了相對定位和絕對位置在頁面配置中的作用,需要的朋友可以參考下

CSS中的定位元模式規定了一個盒子在總體的布局上應該處於什麼位置以及對周圍的盒子會有什麼影響。該模式包括了常規文檔流，浮動，和幾種類型的 position 定位的元素。
其中，CSS position 屬性可以取5種值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
static 是 position 預設的屬性值。任何應用了 position:static 的元素都處於常規文檔流中。它處於什麼位置以及它如何影響周邊的元素都是由盒模型所決定的。
一個 static 定位的元素會忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用這五個屬性，你需要先為它的 position 屬性應用這三個值的其中之一： absolute，relative，fixed
position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素會繼承父元素的 position 值。

為了後面能更好地理解，先特將此例的DOM草圖畫出來：

上面的DOM圖，我想大家一定非常容易的理解，下面就一起來主要看position的使用。

第一步：position: static

在CSS中所有元素的“position”屬性的預設值都是“static”，因為不需要顯式的為每個元素設定“position:static”。此時大家會問，那這個屬性值是不是沒有任何意義呢？其實不是的，他在CSS中也會起著很大的作用。我們來看一個執行個體：

比如說你的兩個頁面，同時存在“p#p-1”，那麼此時你在A面中需要對“p#p-1”進行絕對位置；而在B頁面中“p#p-1”又不需要進行絕對位置。

A頁面中“p#p-1”絕對位置：

#p-1 {       position: absolute;      }

此時在B頁面中不想在進行絕對位置，那麼我們就必須在你的樣式中顯式的重新設定“#p-1”的postion屬性為“static”

body.B #p-1 {       position: static;      }

第二步：相對定位position:relative

relative稱為相對定位，如果你給某個元素指定了postion的值為“relative”，那麼你就可以通過“T-R-B-L”(也就是top,right,bottom,left)來設定元素的定位值。

使用relative時有幾點需要注意：

元素設定了relative時，是相對於元素本身位置進行定位；
元素設定了relative後，可以通過“T-R-B-L”改變元素當前所在的位置，但元素移位後，同樣點有當初的物理空間位；
元素設定了relative後，如果沒有進行任何的“T-R-B-L”設定，元素不會進行任何位置改變。
上面三點第一點和第三點來說都是比較好理解，那麼現在針對第二點，我們來看一個執行個體的操作：

在上面的基礎上，我們對“p-1”進行向下移動20px；向左移動40px:

#p-1 {        position:relative;        top:20px;        left:-40px;       }

我們來看看效果：

從可以再次印證上面說的第二點。元素“p-1”向下移動了20px，向左移動了40px，本身位置變化了，而元素最初所佔的物理空間依然還是存在，另外一點元素相對定位後並沒有影響其他相鄰的元素。

第三步：絕對位置position:absolute

absolute是position中的第三個屬性值，如果你給元素指定了absolute，整個元素就會漂出文檔流，而且元素自身的物理空間也同時消失了。不像“relative”還具有原先的物理空間。

我們來看一個執行個體,在p-1a元素上進行絕對位置：

#p-1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }

此時元素“p-1a”不在當初的文檔流中，而且其此時定位也是相對於html來進行定位，那麼我們有時候並不是需要這樣的效果，哪果我們元素p-1a還想在p-1是進行絕對位置，那要怎麼辦呢？此時就要發揮前面第二步的“relative”作用了。

第四步：relative和absolute的結合

第二步中大家知道元素相對定位“relative”是相對於元素自身定位，而在第三步中大家知道元素絕對位置“absolute”是相對於html。但這種說法只有滿足這樣的條件才是正常的：“絕對位置元素的任何祖先元素沒有進行任何的“relative”或者“absolute”設定，那麼絕對位置的元素的參考物就是html”，這樣一來，“relative”和“absolute”的結合就能起到很大的作用。

我們接下來看一個：

做為一個執行個體來說明“relative”和“absolute”的關係，首先中共有三個p放在body內，而且他們三個p的關係是“p-1>p-2>p-3”,而且在p-3有這麼一個絕對位置：

.p-3 {       position: absolute;       left:0;       top:0;      }

下面分幾個情況來說明的意思：

1、p-1與p-2都沒有設定“position:relative”，此時我們的p-3絕對位置後就漂到了中“p-3c”的位置上；

2、現在我們在p-2元素中加設定一個“position: relative”，此時我們的p-3絕對位置後就漂到了中的“p-3a”的位置;

3、接下來把相對定位的設定換到p-1元素上，此時p-3絕對位置後就到了p-3b的位置。

花這麼多心思，我只想說明一點：如果一個元素絕對位置後，其參照物是以離自身最近元素是否設定了相對定位，如果有設定將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素，一直找到html為止。這句話說起起來好像有點拗口，不知道大家能否明白我說的是什嗎？如果不明白大家可以參考或者下面這個執行個體效果：

回到上面的執行個體中，如果我們在“p-1”加一個“relative”：

#p-1 {       position:relative;      }      #p-1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }

現在我們相對點不在是第三步中的body了，而是“p-1”了，大家看看與第三步的變化：

第五步：relative和absolute實現布局效果

這一步只要想示範一下使用相對定位和絕對位置實現的兩例布局。在前面的基礎上，p-1進行相對定位，而p-1a和p-1b進行絕對位置，從而實現兩列布局的效果：

#p-1 {       position:relative;      }      #p-1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }      #p-1b {       position:absolute;       top:0;       left:0;       width:200px;      }

這樣的製作只是用來說明absolute的作用，如果只能實現上面的效果，可能在實際製作中並不完美，為了讓其更完美一些，在這個基礎上我們在來看下面這一步。

第六步：設定固定高度

為了讓布局更適用一些，可以在p-1元素上設定固定高度，如：

#p-1 {       position:relative;       height:250px;      }      #p-1a {       position:absolute;       top:0;       rightright:0;       width:200px;      }      #p-1b {       position:absolute;       top:0;       left:0;       width:200px;      }

相比之下好一點，但我們並不知道元素內容高度將會是多少，所以在此設定一個固定高度也是我們實際中的一個死穴，個人不建議這樣使用。如果為了需要，我們可以通過別的辦法來實現。

第七步：float

前兩步，使用絕對位置都並不是很理想，那麼我們可以考慮使用float來解決。我們可以在一個元素上使用float，讓元素向左或向右，而且還可以使用文本圍繞在這個元素的周邊（這個作用在文本圍繞圖片特別有用）。下面來類比一下：

#p-1a {       float:left;       width:200px;      }

第八步：多列浮動

上面展示的是一個列浮動，接下來看看多列的變化：

#p-1a {       float:left;       width:150px;      }      #p-1b {       float:left;       width:150px;      }

浮動與絕對位置來相比，現在解決了其高度自適應的問題，但也存在一個問題，浮動也破壞了元素當初的文檔流，使其父元素塌陷了，那麼為瞭解決這個問題，我們有必要對其進行清除浮動。

第九步：清除浮動

為了讓浮動元素的父元素不在處於塌陷狀態下，我們需要對浮動元素進行清除浮動：

#p-1a {       float:left;       width:190px;      }      #p-1b {       float:left;       width:190px;      }      #p-1c {       clear:both;      }