## **position**
1、static：static是所有元素的默認屬性，也就是可以理解為正常的文檔流
2、relative:relative是相對于自己文檔的位置來定位的，對旁邊的元素沒有影響
3、absolute：absolute是相對于父標簽來進行定位的，如果沒有父標簽或者父標簽是static，那么sorry，剛烈的absolute會相對于文檔定位（不同于fixed相對于瀏覽器定位）
4、fixed：是相對于瀏覽器窗口來定位的。不會因為滾動條滾動。
*****
absolute?
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。?
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。?
fixed?
生成絕對定位的元素，相對于瀏覽器窗口進行定位。?
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。?
relative?
生成相對定位的元素，相對于其正常位置進行定位。?
因此，”left:20” 會向元素的 LEFT 位置添加 20 像素。?
static?
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。?
inherit?
規定應該從父元素繼承 position 屬性的值。
static?默認值，就是沒有定位，那就沒必要多解釋了。inherit?繼承父元素，基本上這個參數用得相當少，所以也不做過多的解釋。
*****
## **文檔流布局的概念**
> 將窗體自上而下分成一行行，?并在每行中按從左至右的順序排放元素，即為文檔流。??
每個非浮動塊級元素都獨占一行，?浮動元素則按規定浮在行的一端。?若當前行容不下，?則另起新行再浮動。?
內聯元素也不會獨占一行。?幾乎所有元素(包括塊級，內聯和列表元素）均可生成子行，?用于擺放子元素。??
有三種情況將使得元素脫離文檔流而存在，分別是?浮動，絕對定位，?固定定位。?但是在IE6中浮動元素也存在于文檔流中。
## **position:relative 相對定位**
相對定位：**相對自己文檔流中的原始位置定位**。它的特點是——**不會脫離文檔流**。
也就是說，使用`position:relative`定位，其元素依舊在文檔流中，他的位置可以使用?`left`、`right`、`top`、`bottom`、`z-index`等定位參數。
它的位移**并沒有對周圍的元素有任何的影響！！**它依然存在于文檔流中。它的位移是根據它在文檔流中的原始位置發生的！！這一點非常非常重要。
## **position:fixed 相對瀏覽器定位**
相比而言，這個參數是最好理解的。它相對于瀏覽器的窗口進行定位。同時——**它會脫離文檔流**
當滾動時
## **position:absolute 絕對定位**
絕對定位是一個非常牛逼的屬性，牛逼到，你不知道會發生什么。注意，它的解釋是什么——“**生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。**”
也就是說，它可以相對于各種各樣的東西進行定位。除了?`static`?其他都可以！！！**注意！注意！注意！**?是?**除了**?！
當為其father元素進行絕對定位時 第四個人也絕對定位時 也是可以相對于father元素的
當父元素設置`position:static`時，
*****
絕對定位中**當其所有父元素都是static**
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 15px;
color: #fff;
}
.test1 {
width: 500px;
height: 500px;
background: #123；
}
.test2 {
width: 400px;
height: 400px;
background: #234;
}
.test3 {
width: 300px;
height: 300px;
background: #345;
position: absolute;
right: 20px;
top: 20px;}
</style>
</head>
<body>
<div class="test1">
test1
<div class="test2">
test2
<div class="test3">test3</div>
</div>
</div>
</body>
</html>
```
如上圖所示。我們可以看到，test3既沒有相對于父元素定位，也沒有相對于爺爺元素定位。它居然和`position:fixed`一樣！**相對于瀏覽器定位**了！！
**！！！這是一個錯覺！！！**
當頁面滾動
說明并不是固定定位
如上圖所示，它并非是相對于瀏覽器定位，而是相對于**文檔**定位。相對于文檔，就是相對于整個頁面來進行布局，而相對于窗口，則是相對于瀏覽器的可視區域進行定位，這二者有本質的區別的。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 15px;
color: #fff;
}
.test1 {
width: 500px;
height: 500px;
background: #123；
}
.test2 {
width: 400px;
height: 400px;
background: #234;
position: relative;
left: 50px;
top: 50px;
}
.test3 {
width: 300px;
height: 300px;
background: #345;
position: absolute;
right: -20px;
top: -20px;}
</style>
</head>
<body>
<div class="test1">
test1
<div class="test2">
test2
<div class="test3">test3</div>
</div>
</div>
</body>
</html>
```
從上圖我們可以看到，test2如我們所愿的，相對于自身的位置發生了偏移，而test3則相對于test2發生了偏移。
從這個試驗我們可以看出，當一個元素設置了position:absolute屬性之后，而它的父元素的屬性為position:relative則，它不再是相對于文檔定位，而是相對于父元素定位。
這一點非常重要。最最重要的是，父元素設置為position:relative并不會脫離文檔流，也就是說——利用給父元素設置position:relative屬性，再將子元素設置為position:absolute就可以在文檔流中實現需要的定位
這一點異常重要，也是非常常用的方法！
### **它的父元素的屬性是**?`position:fixed`
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 15px;
color: #fff;
}
.test1 {
width: 500px;
height: 500px;
background: #123；
}
.test2 {
width: 400px;
height: 400px;
background: #234;
position: fixed;
left: 20px;
top: 20px;
}
.test3 {
width: 300px;
height: 300px;
background: #345;
position: absolute;
right: -40px;
top: 40px;
}
</style>
</head>
<body>
<div class="test1">
test1
<div class="test2">
test2
<div class="test3">test3</div>
</div>
</div>
</body>
</html>
```
好，我們可以看到我給test2加上了`position: fixed;right: 20px;top: 20px;`?它會相對于瀏覽器窗口定位，而test3作為test2的子元素，我們加上了`position: absolute;left: -40px;top: 40px`
### 它的父元素的屬性是?`position:absolute`
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 15px;
color: #fff;
}
.test1 {
width: 500px;
height: 500px;
background: #123；
}
.test2 {
width: 400px;
height: 400px;
background: #234;
position: absolute;
left: 20px;
top: 20px;
}
.test3 {
width: 300px;
height: 300px;
background: #345;
position: absolute;
right: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="test1">
test1
<div class="test2">
test2
<div class="test3">test3</div>
</div>
</div>
</body>
</html>
```
test2相對于文檔偏移，而test3相對于test2偏移。
## **position 以及參數總結**
position: relative;不會脫離文檔流，position: fixed;position: absolute;會脫離文檔流
position: relative;?相對于自己在文檔流中的初始位置偏移定位。
position: fixed;?相對于瀏覽器窗口定位。
position: absolute;?是相對于父級非position:static?瀏覽器定位。?
如果沒有任何一個父級元素是非position:static屬性，則會相對于文檔定位。
這里它的父級元素是包含爺爺級元素、祖爺爺級元素、祖宗十八代級元素的。任意一級都可以。
如果它的父級元素和爺爺級元素都是非position:static?屬性，則，它會選擇距離最近的父元素。
