position屬性怎么在CSS中使用

這篇文章將為大家詳細講解有關position屬性怎么在CSS中使用，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

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中也會起著很大的作用。我們來看一個實例：

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

A頁面中“div#div-1”絕對定位：

CSS Code復制內容到剪貼板

1. #div-1 {   

2.     position: absolute;   

3.    }  

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

CSS Code復制內容到剪貼板

1. body.B #div-1 {   

2.     position: static;   

3.    }  

 第二步：相對定位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”設置，元素不會進行任何位置改變。
上面三點第一點和第三點來說都是比較好理解，那么現在針對第二點，我們來看一個實例的操作：

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

CSS Code復制內容到剪貼板

1. #div-1 {   

2.      position:relative;   

3.      top:20px;   

4.      left:-40px;   

5.     }  

我們來看看效果：

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

第三步：絕對定位position:absolute

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

我們來看一個實例,在div-1a元素上進行絕對定位：

CSS Code復制內容到剪貼板

1. #div-1a {   

2.     position:absolute;   

3.     top:0;   

4.     rightright:0;   

5.     width:200px;   

6.    }  

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

第四步：relative和absolute的結合

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

我們接下來看一個截圖：

上圖做為一個實例來說明“relative”和“absolute”的關系，首先上圖中共有三個div放在body內，而且他們三個div的關系是“div-1>div-2>div-3”,而且在div-3有這么一個絕對定位：

CSS Code復制內容到剪貼板

1. .div-3 {   

2.     position: absolute;   

3.     left:0;   

4.     top:0;   

5.    }  

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

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

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

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

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

回到上面的實例中，如果我們在“div-1”加一個“relative”：

CSS Code復制內容到剪貼板

1. #div-1 {   

2.     position:relative;   

3.    }   

4.    #div-1a {   

5.     position:absolute;   

6.     top:0;   

7.     rightright:0;   

8.     width:200px;   

9.    }  

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

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

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

CSS Code復制內容到剪貼板

1. #div-1 {   

2.     position:relative;   

3.    }   

4.    #div-1a {   

5.     position:absolute;   

6.     top:0;   

7.     rightright:0;   

8.     width:200px;   

9.    }   

10.    #div-1b {   

11.     position:absolute;   

12.     top:0;   

13.     left:0;   

14.     width:200px;   

15.    }  

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

第六步：設置固定高度

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

CSS Code復制內容到剪貼板

1. #div-1 {   

2.     position:relative;   

3.     height:250px;   

4.    }   

5.    #div-1a {   

6.     position:absolute;   

7.     top:0;   

8.     rightright:0;   

9.     width:200px;   

10.    }   

11.    #div-1b {   

12.     position:absolute;   

13.     top:0;   

14.     left:0;   

15.     width:200px;   

16.    }  

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

第七步：float

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

CSS Code復制內容到剪貼板

1. #div-1a {   

2.     float:left;   

3.     width:200px;   

4.    }  

第八步：多列浮動

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

CSS Code復制內容到剪貼板

1. #div-1a {   

2.     float:left;   

3.     width:150px;   

4.    }   

5.    #div-1b {   

6.     float:left;   

7.     width:150px;   

8.    }  

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

第九步：清除浮動

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

CSS Code復制內容到剪貼板

1. #div-1a {   

2.     float:left;   

3.     width:190px;   

4.    }   

5.    #div-1b {   

6.     float:left;   

7.     width:190px;   

8.    }   

9.    #div-1c {   

10.     clear:both;   

11.    }  

關于position屬性怎么在CSS中使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。