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

創(chuàng)新互聯(lián)專注于奉節(jié)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供奉節(jié)營銷型網(wǎng)站建設(shè)，奉節(jié)網(wǎng)站制作、奉節(jié)網(wǎng)頁設(shè)計、奉節(jié)網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造奉節(jié)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供奉節(jié)網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

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

第一步：position: static

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. #div-1 {   

2.     position: absolute;   

3.    }  

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. body.B #div-1 {   

2.     position: static;   

3.    }  

 第二步：相對定位position:relative

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

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

元素設(shè)置了relative時，是相對于元素本身位置進(jìn)行定位；
元素設(shè)置了relative后，可以通過“T-R-B-L”改變元素當(dāng)前所在的位置，但元素移位后，同樣點有當(dāng)初的物理空間位；
元素設(shè)置了relative后，如果沒有進(jìn)行任何的“T-R-B-L”設(shè)置，元素不會進(jìn)行任何位置改變。
上面三點第一點和第三點來說都是比較好理解，那么現(xiàn)在針對第二點，我們來看一個實例的操作：

在上面的基礎(chǔ)上，我們對“div-1”進(jìn)行向下移動20px；向左移動40px:

CSS Code復(fù)制內(nèi)容到剪貼板

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元素上進(jìn)行絕對定位：

CSS Code復(fù)制內(nèi)容到剪貼板

1. #div-1a {   

2.     position:absolute;   

3.     top:0;   

4.     rightright:0;   

5.     width:200px;   

6.    }  

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

第四步：relative和absolute的結(jié)合

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

我們接下來看一個截圖：

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .div-3 {   

2.     position: absolute;   

3.     left:0;   

4.     top:0;   

5.    }  

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

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

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

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. #div-1 {   

2.     position:relative;   

3.    }   

4.    #div-1a {   

5.     position:absolute;   

6.     top:0;   

7.     rightright:0;   

8.     width:200px;   

9.    }  

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

第五步：relative和absolute實現(xiàn)布局效果

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

CSS Code復(fù)制內(nèi)容到剪貼板

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的作用，如果只能實現(xiàn)上面的效果，可能在實際制作中并不完美，為了讓其更完美一些，在這個基礎(chǔ)上我們在來看下面這一步。

第六步：設(shè)置固定高度

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

CSS Code復(fù)制內(nèi)容到剪貼板

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.    }  

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

第七步：float

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. #div-1a {   

2.     float:left;   

3.     width:200px;   

4.    }  

第八步：多列浮動

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. #div-1a {   

2.     float:left;   

3.     width:150px;   

4.    }   

5.    #div-1b {   

6.     float:left;   

7.     width:150px;   

8.    }  

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

第九步：清除浮動

為了讓浮動元素的父元素不在處于塌陷狀態(tài)下，我們需要對浮動元素進(jìn)行清除浮動：

CSS Code復(fù)制內(nèi)容到剪貼板

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.    }  

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

網(wǎng)站題目：position屬性怎么在CSS中使用
文章起源：http://www.rwnh.cn/article24/gcgije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、軟件開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、ChatGPT、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)