position 英[p??z??n] 屬性指定了元素的定位類型或悲。
屬性的五個值：
1藤为、static:默認值怪与，靜態(tài)定位，表示沒有定位缅疟，元素會按照正常的位置顯示分别，此時 top、bottom存淫、left 和 right 4 個定位屬性也不會被應用茎杂。
2、relative：相對定位纫雁，即相對于元素的正常位置進行定位煌往，您可以通過 top、right轧邪、bottom刽脖、left 這 4 個屬性來設置元素相對于正常位置的偏移量，在此過程中不會對其它元素造成影響忌愚。
3曲管、absolute：絕對定位，相對于第一個非 static 定位的父級元素進行定位硕糊，可以通過 top院水、right、bottom简十、left 這 4 個屬性來設置元素相對于父級元素位置的偏移量檬某。如果沒有滿足條件的父級元素，則會相對于瀏覽器窗口來進行定位螟蝙。使用絕對定位的元素不會對其它元素造成影響恢恼。
4、fixed：固定定位胰默，相對于瀏覽器的創(chuàng)建進行定位场斑，可以使用 top、right牵署、bottom漏隐、left 這 4 個屬性來定義元素相對于瀏覽器窗口的位置。使用固定定位的元素無論如何滾動瀏覽器窗口元素的位置都是固定不變的奴迅。
5青责、sticky：粘性定位，它是 relative 和 fixed 的結合體，能夠實線類似吸附的效果爽柒，當滾動頁面時它的效果與 relative 相同吴菠，當要滾動到屏幕之外時則會自動變成 fixed 的效果。
靜態(tài)定位：static 英[?st?t?k]
static 是 position 屬性的默認值浩村，表示沒有定位做葵，使用靜態(tài)定位的元素會按照元素正常的位置顯示，并且不會受到 top心墅、bottom酿矢、left、right 和 z-index 屬性的影響怎燥。示例代碼如下：
<!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">postiont: static;</div>
</div>
</body>
</html>
相對定位：relative 英[?rel?t?v]
相對定位就是元素相對于自己默認的位置來進行位置上的調整瘫筐，您可以通過 top、bottom铐姚、left 和 right 四個屬性的組合來設置元素相對于默認位置在不同方向上的偏移量策肝。
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid black;
}
div.static {
width: 140px;
height: 50px;
background-color: #B3FF99;
line-height: 50px;
text-align: center;
position: relative;
top: 25px;
left: 10px;
}
p {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 0;
}
</style>
</head>
<body>
<div>
<div class="static">position: relative;</div>
<p></p>
</div>
</body>
</html>
絕對定位：absolute 英[??bs?lu?t]
絕對定位就是元素相對于第一個非靜態(tài)定位（static）的父級元素進行定位，如果找不到符合條件的父級元素則會相對與瀏覽器窗口來進行定位隐绵。您同樣可以使用 top之众、bottom、left 和 right 四個屬性來設置元素相對于父元素或瀏覽器窗口不同方向上的偏移量依许。
圖：top棺禾、bottom、left峭跳、right 屬性在絕對定位中的使用
使用絕對定位的元素會脫離原來的位置膘婶，不再占用網頁上的空間。與相對定位相同蛀醉，使用絕對定位的元素同樣會與頁面中的其它元素發(fā)聲重疊悬襟，另外使用絕對定位的元素可以有外邊距，并且外邊距不會與其它元素的外邊距發(fā)生重疊滞欠。
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid black;
position: relative;
}
div.static {
width: 150px;
height: 50px;
background-color: #B3FF99;
line-height: 50px;
text-align: center;
position: absolute;
bottom: 10px;
right: 5px;
}
p {
width: 100px;
height: 100px;
background-color: #CCC;
margin: 0;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div class="static">position: absolute;</div>
<p><p></p>
</div>
</body>
</html>
固定定位：fixed 英[f?kst]
固定定位就是將元素相對于瀏覽器窗口進行定位古胆，使用固定定位的元素不會因為瀏覽器窗口的滾動而移動肆良，就像是固定在了頁面上一樣筛璧，我們經常在網頁上看到的返回頂部按鈕就是使用固定定位實現(xiàn)的。
<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 500px;
}
p {
width: 150px;
height: 50px;
background-color: #CCC;
margin: 0;
text-align: center;
line-height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div>
<p class="fixed">position: fixed;</p>
</div>
</body>
</html>
粘性定位：sticky 英[?st?ki]
粘性定位與前面介紹的四種定位方式不太一下惹恃，它像是相對定位和固定定位的結合體夭谤，當滾動頁面時它的效果與相對定位相同，當元素滾動到一定程度時它又會呈現(xiàn)出固定定位的效果巫糙。比如一些網頁上的導航菜單朗儒，當頁面加載完成時它在自己默認的位置，當我們向下滾動頁面時它又會固定在頁面的最頂端。
<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 500px;
position: relative;
}
p {
width: 100%;
height: 50px;
margin: 0;
text-align: center;
line-height: 50px;
background-color: #CCC;
}
p.sticky {
background-color: blue;
position: sticky;
top:0px;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p class="sticky">position: sticky;</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
</body>
</html>
在使用粘性定位時醉锄，需要注意以下幾點：
在設置position:sticky;時乏悄，必須再定義 top、bottom恳不、right檩小、left 四個屬性之一，否則只會處于相對定位的狀態(tài)烟勋；
使用粘性定位元素的父元素不能定義overflow:hidden或者overflow:auto屬性规求；
父元素的高度不能低于粘性定位元素的高度；
粘性定位的元素僅在其父元素內有效卵惦。
原文來源：[菜鳥教程](CSS Position(定位) | 菜鳥教程 (runoob.com)
)
