CSS 中的 position 屬性用來設(shè)置元素在頁面中的位置，通過該屬性您可以把任何屬性放置在任何您認(rèn)為合適的位置。
position屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對或固定元素會生成一個(gè)塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。
position 屬性規(guī)定應(yīng)用于元素的定位方法的類型（static、relative、fixed、absolute 或 sticky）：
| 取值 | 說明 |
| static | 默認(rèn)值，靜態(tài)定位，表示沒有定位，元素會按照正常的位置顯示，此時(shí) top、bottom、left 和 right 4 個(gè)定位屬性也不會被應(yīng)用。 |
| relative | 相對定位，即相對于元素的正常位置進(jìn)行定位，您可以通過 top、right、bottom、left 這 4 個(gè)屬性來設(shè)置元素相對于正常位置的偏移量，在此過程中不會對其它元素造成影響。 |
| absolute | 絕對定位，相對于第一個(gè)非 static 定位的父級元素進(jìn)行定位，可以通過 top、right、bottom、left 這 4 個(gè)屬性來設(shè)置元素相對于父級元素位置的偏移量。如果沒有滿足條件的父級元素，則會相對于瀏覽器窗口來進(jìn)行定位。使用絕對定位的元素不會對其它元素造成影響。 |
| fixed | 固定定位，相對于瀏覽器的創(chuàng)建進(jìn)行定位，可以使用 top、right、bottom、left 這 4 個(gè)屬性來定義元素相對于瀏覽器窗口的位置。使用固定定位的元素?zé)o論如何滾動瀏覽器窗口元素的位置都是固定不變的。 |
| sticky | 粘性定位，它是 relative 和 fixed 的結(jié)合體，能夠?qū)嵕€類似吸附的效果，當(dāng)滾動頁面時(shí)它的效果與 relative 相同，當(dāng)要滾動到屏幕之外時(shí)則會自動變成 fixed 的效果。 |
元素其實(shí)是使用 top、bottom、left 和 right 屬性定位的。但是，除非首先設(shè)置了 position 屬性，否則這些屬性將不起作用。根據(jù)不同的 position 值，它們的工作方式也不同。
1. 靜態(tài)定位：static
HTML 元素默認(rèn)情況下的定位方式為 static（靜態(tài)）。
靜態(tài)定位的元素不受 top、bottom、left 和 right 屬性的影響。
position: static; 的元素不會以任何特殊方式定位；它始終根據(jù)頁面的正常流進(jìn)行定位：
舉例：
<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 100px;
border: 1px solid black;
}
div.static {
width: 130px;
height: 50px;
background-color: #CCC;
line-height: 50px;
text-align: center;
position: static;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div>
<div class="static">item;</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
2. 相對定位：relative
舉例：
<html>
<head>
<style type="text/css">
#item1 {
width:100px;
height:100px;
background-color:green;
}
#item2 {
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="content">
<div id="item1" >item1</div>
<div id="item2">item2</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
若更改代碼中CSS樣式文件如下：
<html>
<head>
<style type="text/css">
#item1 {
width:100px;
height:100px;
background-color:green;
}
#item2 {
width:100px;
height:100px;
background-color:red;
position:relative;
left:20px;
top:20px;
}
</style>
</head>
<body>
<div id="content">
<div id="item1" >item1</div>
<div id="item2">item2</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
總結(jié)：relative是相對正常文檔流的位置進(jìn)行偏移，原先占據(jù)的位置依然存在，也就是說它不會影響后面元素的位置。left表示相對原先位置右邊進(jìn)行偏移，top表示相對原先位置下邊進(jìn)行偏移。當(dāng)left和right同時(shí)存在，僅left有效，當(dāng)top和bottom同時(shí)存在僅top有效。relative的偏移是基于對象的margin左上側(cè)的。
3. 絕對定位：absolute
舉例：
<html>
<head>
<style type="text/css">
#item1 {
width:100px;
height:100px;
background-color:green;
}
#item2 {
width:100px;
height:100px;
background-color:red;
}
#content {
margin-left:100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="content">
<div id="item1" >item1</div>
<div id="item2">item2</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
當(dāng)修改css樣式文件時(shí)：
<html>
<head>
<style type="text/css">
#item1 {
width:100px;
height:100px;
background-color:green;
}
#item2 {
width:100px;
height:100px;
background-color:red;
position: absolute;
left:20px;
top:20px;
}
#content {
margin-left:100px;
margin-top:100px;
}
</style>
</head>
<body>
<div id="content">
<div id="item1" >item1</div>
<div id="item2">item2</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
由此可見當(dāng)父級元素的position屬性值為默認(rèn)值時(shí)（static）,absolute是相對于瀏覽器窗口進(jìn)行定位的。
如果設(shè)置content的position屬性值為非默認(rèn)值，那么absolute就是相對于該父級元素進(jìn)行定位：
<html>
<head>
<style type="text/css">
#item1 {
width:100px;
height:100px;
background-color:green;
}
#item2 {
width:100px;
height:100px;
background-color:red;
position: absolute;
left:20px;
top:20px;
}
#content {
margin-left:100px;
margin-top: 100px;
position: relative
}
</style>
</head>
<body>
<div id="content">
<div id="item1" >item1</div>
<div id="item2">item2</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
繼續(xù)修改css樣式：
<html>
<head>
<style type="text/css">
#item1 {
width:100px;
height:100px;
background-color:green;
}
#item2 {
width:100px;
height:100px;
background-color:red;
}
#content {
margin-left:100px;
margin-top: 100px;
position:absolute;
padding:20px;
border:10px solid black;
}
</style>
</head>
<body>
<div id="content">
<div id="item1" >item1</div>
<div id="item2">item2</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
注意到變化了嗎，當(dāng)把外層div設(shè)置為absolute時(shí)，外層div寬度由原來的100%變?yōu)閍uto.
當(dāng)把一個(gè)元素position屬性設(shè)置為absolute或fixed的時(shí)候，會發(fā)生三件事：
（1）把該元素往 Z 軸方向移了一層，元素脫離了普通流，所以不再占據(jù)原來那層的空間，還會覆蓋下層的元素。
（2）該元素將變?yōu)閴K級元素，相當(dāng)于給該元素設(shè)置了 display: block;（給一個(gè)內(nèi)聯(lián)元素，如 <span> ，設(shè)置 absolute 之后發(fā)現(xiàn)它可以設(shè)置寬高了）。
（3）如果該元素是塊級元素，元素的寬度由原來的 width: 100%（占據(jù)一行），變?yōu)榱?auto?！ ?/p>
4. 固定定位：fixed
固定定位就是將元素相對于瀏覽器窗口進(jìn)行定位，使用固定定位的元素不會因?yàn)闉g覽器窗口的滾動而移動，就像是固定在了頁面上一樣，我們經(jīng)常在網(wǎng)頁上看到的返回頂部按鈕就是使用固定定位實(shí)現(xiàn)的。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.out{
border: red 1px solid;
height: 600px;
width: 500px;
}
.in{
border: blue 1px solid;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="out" style="position: relative;" >
<div class="in" style=" background-color: wheat;"></div>
<div class="in" style=" background-color: red; position: fixed; left: 20px; bottom: 10px;"></div>
<div class="in" style=" background-color: blue;"></div>
</div>
</body>
</html>運(yùn)行結(jié)果：
5. 粘性定位：sticky
粘性定位與前面介紹的四種定位方式不太一下，它像是相對定位和固定定位的結(jié)合體，當(dāng)滾動頁面時(shí)它的效果與相對定位相同，當(dāng)元素滾動到一定程度時(shí)它又會呈現(xiàn)出固定定位的效果。比如一些網(wǎng)頁上的導(dǎo)航菜單，當(dāng)頁面加載完成時(shí)它在自己默認(rèn)的位置，當(dāng)我們向下滾動頁面時(shí)它又會固定在頁面的最頂端。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.out{
border: red 1px solid;
height: 600px;
width: 500px;
}
.in{
border: blue 1px solid;
height: 200px;
width: 250px;
}
</style>
</head>
<body>
<div class="out" >
<div class="in" style=" background-color: wheat;"></div>
<div class="in" style=" background-color: red;"></div>
<div class="in" style=" background-color: blue;"></div>
</div>
</body>
</html>運(yùn)行結(jié)果：
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個(gè)爬蟲的Python編程課程
只會語法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程