CSS 中的 position 屬性用來(lái)設(shè)置元素的定位方式燥爷。
position 的值有 static梅惯、relative晰搀、absolute栅屏、fixed 和 sticky，默認(rèn)值為 static各聘，position 值為 relative、absolute、fixed 或 sticky 的元素成為定位元素墨辛，top、right趴俘、bottom 和 left 屬性為被定位元素指定位置睹簇。
static
position 屬性值為 static 的元素使用正常的布局行為，top寥闪、right太惠、bottom、left 和 z-index 屬性無(wú)效疲憋。
relative
position 屬性值為 relative 的元素被稱為相對(duì)定位元素凿渊。相對(duì)定位元素相對(duì)于未設(shè)置 position 屬性為 relative 時(shí)該元素的位置進(jìn)行定位。其位置調(diào)整是在不改變頁(yè)面布局的前提下調(diào)整的缚柳，也就是說(shuō)其原始位置會(huì)留下空白埃脏。
absolute
position 屬性值為 absolute 的元素被稱為絕對(duì)定位元素。絕對(duì)定位元素相對(duì)于最近的非 static 祖先元素進(jìn)行定位秋忙，如果不存在這樣的祖先元素彩掐，則相對(duì)于根元素進(jìn)行定位。與相對(duì)定位元素不同的是灰追，絕對(duì)定位元素脫離了文檔流佩谷，在文檔流中不占據(jù)空間。
注意监嗜，如果同時(shí)指定了 top 和 bottom（非 auto）谐檀，優(yōu)先采用 top；如果同時(shí)指定了 left 和 right裁奇，優(yōu)先采用 left桐猬。
fixed
position 屬性值為 fixed 的元素被稱為固定定位元素。固定定位元素相對(duì)于瀏覽器窗口進(jìn)行定位刽肠，其位置不隨頁(yè)面滾動(dòng)而發(fā)生變化溃肪。與絕對(duì)定位元素相同免胃，固定定位元素也脫離了文檔流，在文檔流中不占據(jù)空間惫撰。
sticky
IE 和 Edge 瀏覽器不支持此屬性值羔沙！
position 屬性值為 sticky 的元素被稱為粘性定位元素。粘性定位是相對(duì)定位和固定定位的混合厨钻，元素在跨越特定閾值前為相對(duì)定位扼雏，之后為固定定位。例如下面代碼中的 box 元素夯膀，它在距離瀏覽器窗口上邊距離大于 20px 時(shí)為相對(duì)定位诗充，隨著頁(yè)面的滾動(dòng)而滾動(dòng)，當(dāng)距離等于 20px 后诱建，就會(huì)變?yōu)楣潭ǘㄎ缓眩湮恢脤⒉粫?huì)繼續(xù)隨著頁(yè)面滾動(dòng)而變化。
.box {
width: 50px;
height: 50px;
background-color: red;
position: sticky;
top: 20px;
}
注意俺猿，只有指定了 top茎匠、right、bottom 或 left 其中之一押袍，粘性定位才會(huì)生效诵冒，否則和相對(duì)定位效果相同。
