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、上下左右【偏移規則】 |