定位
相對(duì)定位
- 作用：
- 相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來移動(dòng)
- 格式:
position: relative; - 事例：
div{
background-color: green;
position: relative;
top: 20px;
left: 20px;
} - 注意：
- 相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
- 在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)
- 由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 所以在相對(duì)定位中是區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
- 由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置, 所以當(dāng)給相對(duì)定位的元素設(shè)置margin/padding等屬性的時(shí)會(huì)影響到標(biāo)準(zhǔn)流的布局
絕對(duì)定位
- 作用：
- 絕對(duì)定位就是相對(duì)于body或者某個(gè)定位流中的祖先元素來定位
- 格式:
position: absolute; - 事例：
div{
background-color: green;
position: absolute;
left: 0;
top: 0;
｝ - 注意：
- 絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的
- 絕對(duì)定位的元素是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
- 如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn), 那么其實(shí)是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn), 而不是以整個(gè)網(wǎng)頁的寬度和高度作為參考點(diǎn)
- 相對(duì)于body定位會(huì)隨著頁面的滾動(dòng)而滾動(dòng)
- 一個(gè)絕對(duì)定位的元素會(huì)忽略祖先元素的padding
- 絕對(duì)定位參考點(diǎn):
- 默認(rèn)情況下所有的絕對(duì)定位的元素, 無論有沒有祖先元素, 都會(huì)以body作為參考點(diǎn)
- 如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素中有一個(gè)是定位流中的元素, 那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)
- 如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素中有多個(gè)是定位流中的元素, 那么這個(gè)絕對(duì)定位的元素會(huì)以離它最近的那個(gè)定位流的祖先元素為參考點(diǎn)
- 絕對(duì)定位水平居中：
- 注意當(dāng)一個(gè)盒子絕對(duì)定位之后不能使用margin: 0 auto;讓盒子自身居中
- 如果想讓過一個(gè)絕對(duì)定位的盒子自身居中, 可以使用設(shè)置絕對(duì)定位元素的left: 50%;和絕對(duì)定位元素的margin-left:-元素寬度一半px;
div{
width: 400px;
height: 50px;
background-color: red;
position: absolute;
/無效/
/margin: 0 auto;/
/有效/
left: 50%;
margin-left:-200px;
} - 絕對(duì)定位應(yīng)用場景：
- 用于對(duì)元素進(jìn)行微調(diào)
- 配合后面學(xué)習(xí)的絕對(duì)定位來使用
子絕父相
- 企業(yè)開發(fā)中一般相對(duì)定位和絕對(duì)定位都是一起出現(xiàn), 很少單獨(dú)使用
- 相對(duì)定位和絕對(duì)定位一般都是用來做覆蓋效果的, 當(dāng)看到某個(gè)元素覆蓋在另外一個(gè)元素上時(shí), 第一時(shí)間就要想到定位流
固定定位
- 作用：
- 固定定位和前面學(xué)習(xí)的背景關(guān)聯(lián)方式很像, 背景關(guān)聯(lián)方式可以讓某個(gè)圖片不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng), 而固定定位可以讓某個(gè)盒子不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
- 格式:
position: fixed; - 注意：
- 固定定位的元素是脫離標(biāo)準(zhǔn)流的, 不會(huì)占用標(biāo)準(zhǔn)流中的位置
- 由于固定定位的元素是脫離標(biāo)準(zhǔn)流的, 所以絕對(duì)定位的元素不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
- IE6不支持固定定位
靜態(tài)定位
- 默認(rèn)情況下標(biāo)準(zhǔn)流中的元素position屬性就等于static, 所以靜態(tài)定位其實(shí)就是默認(rèn)的標(biāo)準(zhǔn)流
z-index屬性
- 作用：用于指定定位的元素的覆蓋關(guān)系
- 定位元素的覆蓋關(guān)系:
- 默認(rèn)情況下定位的元素一定會(huì)蓋住沒有定位的元素
- 默認(rèn)情況下寫在后面的定位元素會(huì)蓋住前面的定位元素
- 默認(rèn)情況下所有元素的z-index值都是0, 如果設(shè)置了元素的z-index值, 那么誰比較大誰就顯示在前面
- 定位元素的從父現(xiàn)象
- 父元素沒有z-index值, 那么子元素誰的z-index大誰蓋住誰
- 父元素z-index值不一樣, 那么父元素誰的z-index大誰蓋住誰
- z-index應(yīng)用場景
- 控制界面上的定位元素的覆蓋關(guān)系, 例如網(wǎng)頁中后面的定位元素不能覆蓋前面的導(dǎo)航條通欄
