By Leaf
定位是css布局的核心前计，在項目中很多地方都需要用到定位，這里做一個小結(jié)楚午，便于記憶查詢祖灰。
定位position的屬性有4個：
- static（靜態(tài)定位或默認(rèn)定位）
- relative（相對定位)
- absolute (絕對定位)
- fixed (固定定位)
一、靜態(tài)定位 position:static
??所有的元素都具有position券腔，最初的默認(rèn)值就是static,不會被特殊定位伏穆。即：設(shè)置了top\right\bottom\left也不受影響，不會偏離原來的位置纷纫。如果元素設(shè)置了position的其他屬性（relative蜈出、absolute\fixed），那么就會覆蓋默認(rèn)的static涛酗。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-static靜態(tài)定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
</body>
</html>
最后顯示效果：
二铡原、相對定位 position:relative
- 相對定位，是相對元素原來的位置發(fā)生偏移商叹；
- 本身不脫離文檔流燕刻；
- 必須配合位置屬性top\right\bottom\left來使用，但是垂直方向（top\bottom）,水平方向（right\left）中兩個值只能選一個剖笙。如果同時設(shè)置了top和bottom卵洗，會根據(jù)優(yōu)先級選擇top或left；
- 可能會覆蓋在其他元素上邊弥咪；
??下面將第二個div（.leaf-2）設(shè)置相對定位relative:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-relative相對定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
/* leaft-2設(shè)置相對定位 */
.leaf-2{
position: relative;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
</body>
</html>
最后效果：
??有圖可以看出过蹂，.leaf-2這個div設(shè)置成position:relative定位之后，①只是相對于它原來的位置發(fā)生了一個偏移聚至。②同時它在文檔中的位置還是保留的酷勺，并沒有脫離文檔流。③覆蓋在.leaf-3上（因為leaf-3沒有設(shè)置定位屬性扳躬，所以會被覆蓋脆诉，可以通過z-index來解決這種覆蓋問題）甚亭。
三、絕對定位 position:absolute
-
絕對定位击胜，絕對定位的元素根據(jù)
①是否有父元素或祖先元素亏狰、②祖先元素是否設(shè)置了定位（相對定位、絕對定位）為參考點(diǎn)偶摔。有以下幾種情況：
1）絕對定位元素沒有祖先元素暇唾，默認(rèn)body為其祖先元素，絕對定位元素相對于文檔的body元素定位辰斋；
2）有祖先元素策州，但是祖先元素沒有設(shè)置定位，絕對定位元素相對于文檔的body元素定位
3）有祖先元素亡呵，祖先元素設(shè)置了定位抽活，則絕對定位元素就會以具有定位流的祖先元素為參考點(diǎn)硫戈；
4）有祖先元素锰什，并且祖先元素中有多個元素都是定位流，那么絕對定位元素采取“就近原則”就會以離它最近具有定位流的祖先元素為參考點(diǎn)丁逝。總結(jié)為一句話就是：
絕對定位汁胆，相對于最近的具有position（absolute、relative霜幼、staic）的祖先元素定位嫩码。 脫離文檔流
下面我們根據(jù)以上說的情況來分別寫一下demo：
1.絕對定位元素沒有祖先元素，絕對定位元素相對于文檔的body元素定位
新增加一個沒有父元素的.leaf-4的div,并設(shè)置為絕對定位具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute絕對定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
.leaf-4{
width: 200px;
height: 100px;
border: 1px solid rgb(4, 0, 255);
font-size: 30px;
/* 設(shè)置絕對定位 */
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
<div class="leaf-4">leaf-4沒有祖先元素</div>
</body>
</html>
最后效果：
??因為leaf-4沒有父元素罪既，它的默認(rèn)祖先元素就是body,所以它是以body為參考點(diǎn)的铸题，相對body來定位，向下和向右各偏移了20px琢感。
2.有祖先元素丢间，祖先元素設(shè)置了定位，則絕對定位元素就會以具有定位流的祖先元素為參考點(diǎn)驹针；
下面將具有父元素的leaf-2設(shè)置成絕對定位烘挫，父元素沒有設(shè)置定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute絕對定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
/* leaf-2設(shè)置絕對定位，父元素不設(shè)置定位*/
.leaf-2{
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
</body>
</html>
這時饮六，將leaf-2的父元素設(shè)置定位（relative或absolute）：
/* leaf-2設(shè)置絕對定位，父元素設(shè)置定位*/
#wrapper{
position: relative;
/* position: absolute; */
}
.leaf-2{
position: absolute;
top: 20px;
left: 20px;
}
最后效果：
?由此卤橄，可以看出leaf-2相對它的父元素發(fā)生了偏移，且脫離了文檔流臂外，直接從文檔流中移出來了虽风，類似float的效果棒口。
3.有祖先元素，并且祖先元素中有多個元素都是定位流辜膝，那么絕對定位元素采取“就近原則”就會以離它最近具有定位流的祖先元素為參考點(diǎn)无牵。
在leaf-2增加一個子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute絕對定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
/* leaf-2設(shè)置絕對定位，父元素設(shè)置定位*/
#wrapper {
position: relative;
}
.leaf-2 {
position: absolute;
top: 20px;
left: 20px;
}
/* leaf-2-son設(shè)置絕對定位厂抖，它的所有父元素都設(shè)置了定位 */
.leaf-2-son{
width: 50px;
height: 50px;
background: blue;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper_outer">
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">
<div class="leaf-2-son">
son
</div>
</div>
<div class="leaf-3">leaf-3</div>
</div>
</div>
</body>
</html>
最后效果：
??由圖，leaf-2-son相對于最近的具有定位的祖先元素leaf-2發(fā)生了定位忱辅。
在企業(yè)開發(fā)中一般不單獨(dú)使用相對定位和絕對定位七蜘，而是結(jié)合一起使用。一般“子絕父相”墙懂，即子元素用絕對定位橡卤，父元素用相對定位。但凡說到定位或一個盒子覆蓋在另一個盒子上都要想到
“子絕父相”损搬。
一般的應(yīng)用場景都用于對元素進(jìn)行微調(diào)或類似下圖”New“這種：
定位應(yīng)用場景.png
四碧库、固定定位 position:fixed
- 固定定位position:fixed和絕對定位有點(diǎn)相似，相對于視窗來定位,但是固定定位的元素的位置不會隨著頁面滾動條而發(fā)生變化巧勤，元素還是停留在原來位置嵌灰，固定在頁面中。
- 脫離文檔流
固定定位一般的應(yīng)用場景：
固定的頂部（如導(dǎo)航條）颅悉、固定的底部沽瞭、遮罩層、返回頂部剩瓶、一直固定居中在頁面的新彈框等驹溃，只要不隨著頁面滾動條變化的一般都采用fixed布局。
附：這里有一個之前寫的fixed應(yīng)用場景-遮罩層的小筆記延曙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute絕對定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 2000px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
#wrapper {
position: relative;
}
.leaf-2 {
position: absolute;
top: 20px;
left: 20px;
}
.leaf-2-son{
width: 50px;
height: 50px;
background: blue;
position: absolute;
top: 20px;
left: 20px;
}
/* 為了更好的看到效果可以將#wrapper的高度設(shè)置成2000px,
然后將leaf-3設(shè)置fixed固定定位豌鹤，不隨滾動條的滾動而改變 */
.leaf-3{
position: fixed;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="wrapper_outer">
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">
<div class="leaf-2-son">
son
</div>
</div>
<div class="leaf-3">leaf-3</div>
</div>
</div>
</body>
</html>
最后效果：
?由此搂鲫，可以看到不管如何滾動條如何變化傍药，leaf-3的位置都是一直在右下角，不隨著滾動條的滾動而發(fā)生改變魂仍。
最后將以上內(nèi)容簡單總結(jié)了一個表格：
| relative | absolute | fixed | static |
|---|---|---|---|
| 相對于自身原來的位置發(fā)生偏移 | 相對最近的具有定位流的祖先元素定位 | 相對于視窗定位拐辽，位置不隨滾動條變化而變化 | 不會被特殊定位 |
| 不脫離文檔流 | 脫離文檔流 |
脫離文檔流 |
不脫離文檔流 |
| 應(yīng)用場景： "子絕父相"配合使用，用于元素的微調(diào) | "子絕父相"配合使用擦酌，用于元素的微調(diào) | 固定導(dǎo)航欄俱诸、頂部、遮罩層等 | 元素的默認(rèn)值 |
??這里只是將之前凌亂的筆記重新做一個梳理赊舶、總結(jié)睁搭，便于溫習(xí)與查閱赶诊。可能會有錯园骆，望大神指正舔痪！
