CSS定位（慕課網學習筆記）
阿新 • • 發佈：2018-12-19
定位模型
static自然模型
relative相對定位模型
absolute絕對定位模型
fixed固定定位模型
sticky磁鐵定位模型
possition之static（預設的設定）(靜態定位、常規定位、自然定位)
| 作用 | 使元素定位於 常規/自然流 中 （塊、行垂直排列下去，行內水平從左到右） |
|---|---|
| 特點 | 1、忽略top,bottom,left,right或者z-index宣告 |
| 2、兩個相鄰的元素如果設定了外邊距，那麼最終外邊距=兩者外邊距最大的 | |
| 3、具有固定width和height值的元素，如果把左右外邊距設定為auto,則左右外邊距會自動擴大佔滿剩餘寬度。造成的想過就是這個塊水平居中 |
特點例子：1、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change-to-flex</title> <link rel="stylesheet" href="./reset.css"> <style> .block { /*這個先不管他*/ position: relative; /*設定10畫素的top值*/ top:10px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 2px solid blue; box-sizing: border-box; } .block:nth-child(2){ /*static會使2框迴歸自然流，看效果*/ position: static; border-color:red; } </style> </head> <body> <div class="block"> 1 </div> <div class="block"> 2 </div> <div class="block"> 3 </div> <div class="block"> 4 </div> </body> </html>
特點二：1和2之間的邊距是2的外邊距20，而不是1和2外邊距之和。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change-to-flex</title> <link rel="stylesheet" href="./reset.css"> <style> .block { position: static; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 2px solid blue; box-sizing: border-box; } .block:nth-child(1){ margin: 10px; border-color:red; } .block:nth-child(2){ margin: 20px; border-color:red; } </style> </head> <body> <div class="block"> 1 </div> <div class="block"> 2 </div> <div class="block"> 3 </div> <div class="block"> 4 </div> </body> </html>
特點三：
上例中改為
.block:nth-child(1){
margin: auto;
border-color:red;
}
position之relative相對定位（參照物）
| 作用 | 使元素成為containing-block 官方解釋是可定位的祖先元素 |
|---|---|
| 特點 | 1、可以使用top/right/bottom/left/z-index進行相對定位 （相對於自己在常規流中的位置） |
| 2、相對定位的元素不會離開常規流（原來常規流中的位置依然空置存在） | |
| 3、任何元素都可以設定為relative,他的絕對定位的後代都可以相對於他進行絕對定位–超好用（因為絕對定位是相對於父元素而言的） | |
| 4、可以使浮動元素髮生偏移，並控制它們的堆疊順序（浮動元素不能設定偏移即外邊距等，但加上相對定位就可以了） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-relative</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
width:300px;
height:300px;
background: blue;
}
.parent div {
width: 80px;
height: 80px;
}
.sub-1 {
/*相抵於原來自己在常規流中的定位*/
position:relative;
background: red;
top:20px;
left: 50px;
}
.sub-2 {
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="sub-1"></div>
<div class="sub-2"></div>
</div>
<div class=""></div>
di
</body>
</html>
position之absolute（絕對定位）
lrtb : left，right，top，bottom
| 作用 | 使元素脫離常規流 |
|---|---|
| 特點 | 1、脫離常規流 |
| 2、設定尺寸要注意：百分比比的是誰？——最近定位的祖先元素 | |
| 3、lrtb如果設定為0 它將對其到最近定位祖先元素的各一邊——衍生出一個居中妙計 | |
| 4、lrtb如果設定成auto它將被打回原形恢復到常規流 | |
| 5、如果沒有最近定位祖先元素，會認body為父元素 | |
| 6、z-index可以控制堆疊順序 |
1、脫離常規流，原來的位置會被下面的元素佔用
2、百分比，lrtb等都是相對於父元素而言的
3、如果設定lrtb為auto由第四點可知，會回到常規流，所以設定lrtb均為0，然後設定margin為auto，自然居中
4、。。。。
5、。。。。
6、設定堆疊順序，屬性僅在節點的 position 屬性為 relative, absolute 或者
fixed 時生效.z-index 大的元素會覆蓋 z-index 小的元素，即 z-index 越大優先順序越高
position之fixed(固定定位)
| 作用 | 我跟絕對定位本是同根生 |
|---|---|
| 特點 | 1、和absolute的區別？相對於誰做絕對定位 |
| 2、固定定位元素不會隨著視口的滾動而滾動 | |
| 3繼承absolute的所有特點 |
1、固定定位相對於視口（視窗、廣告）
2、一直在視窗的同一個位置
3、。。。。
position之sticky(磁鐵定位、粘性定位、吸附定位)——新的
| 作用 | relative+fixed的完美結合，製造出吸附效果 |
|---|---|
| 特點 | 1、如果產生偏移原位置還是會在常規流中 |
| 2、如果他的最近祖先元素有滾動，那麼它的偏移標尺就是最近的祖先元素 | |
| 3、如果最近的祖先元素沒有滾動那麼它的偏移標尺是視口 | |
| 4、上下左右【偏移規則】 |