定位可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定在屏幕中某個(gè)位置，并且可以壓住其他盒子。
定位 = 定位模式 + 邊偏移
| 定位模式 | 說明 |
|---|---|
| static | 靜態(tài)定位,按標(biāo)準(zhǔn)流特性擺放,沒有邊偏移,很少用 |
| relative | 相對(duì)定位,相對(duì)自身原有位置移動(dòng),原有位置繼續(xù)占有（不脫標(biāo)） |
| absolute | 絕對(duì)定位 ,相對(duì)祖先元素移動(dòng)位置（脫標(biāo)） |
| fixed | 固定定位, 以瀏覽器的可視窗口為位置參照 （脫標(biāo)） |
| sticky | 粘性定位，兼容性較差，IE不支持 |
絕對(duì)定位特點(diǎn):
1．如果沒有祖先元素或者祖先元素沒有定位，則定位以瀏覽器為準(zhǔn)。
2．如果祖先元素有定位(相對(duì)、絕對(duì)、固定定位），則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。
3.絕對(duì)定位不再占有原先的位置。(脫標(biāo)）
粘性定位特點(diǎn)：
1.以瀏覽器的可視窗口為位置參照，占有原先位置，是絕對(duì)定位和相對(duì)定位的混合。
2.必須添加top,bottom,left,right中的一個(gè)才有效。
子絕父相
如果子級(jí)使用絕對(duì)定位,則父級(jí)需要使用相對(duì)定位.
定位疊放次序z-index
z-index:1;
z軸高度，數(shù)值越大越靠上，可以為正數(shù)、零、負(fù)數(shù)，默認(rèn)為auto。如果屬性值相同，則按照書寫的順序，后來者居上。只有定位的盒子才有這個(gè)屬性，數(shù)值后面不能加單位。
注意
1.加了絕對(duì)定位的盒子，不能通過margin:0 auto;來水平居中。
2.脫標(biāo)的盒子（浮動(dòng)元素、絕對(duì)定位、固定定位）不會(huì)觸發(fā)外邊距合并。
3.浮動(dòng)元素會(huì)壓住下方標(biāo)準(zhǔn)流的盒子，但不會(huì)壓住盒子里的文字或圖片。絕對(duì)定位、固定定位的盒子會(huì)壓住下方的所有內(nèi)容。文章來源：http://www.zghlxwxcb.cn/news/detail-701116.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
margin: 10px auto;
height: 3000px;
width: 600px;
background-color: pink;
line-height: 30px;
}
.father {
/* 父相,相對(duì)原有位置下降30px,即這里設(shè)置的行高大小,原有位置
繼續(xù)占有,下一個(gè)p標(biāo)簽顯示在這個(gè)div的下方 */
position: relative;
top: 30px;
background-color: skyblue;
height: 300px;
}
.son {
/* 子絕,不占有原有位置,下方文字向上對(duì)齊,子級(jí)盒子覆蓋部分文字 */
position: absolute;
top: 0px;
left: 200px;
background-color: aquamarine;
width: 100px;
height: 100px;
}
.div1 p {
/* p標(biāo)簽在其原有位置正好被father塊完全覆蓋,設(shè)置20px的上margin,使得文字顯示了2/3 */
margin-top: 20px;
background-color: skyblue;
}
.div2 {
position: fixed;
bottom: 20px;
right: 20px;
height: 100px;
width: 100px;
background-color: aquamarine;
}
.div3 {
/* 固定在版心旁的盒子 */
position: fixed;
top: 30px;
/*1.走瀏覽器寬度的一半 */
right: 50%;
/* 2.利用margin,走版心的一半+空隙 */
margin-right: 310px;
height: 100px;
width: 50px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="div1">
版心盒子
<div class="father">
<div class="son">
絕對(duì)定位的子級(jí)盒子
</div>
版心里的相對(duì)定位父級(jí)盒子<br>
................................................................
..................................................................
</div>
<p>父級(jí)盒子后面的塊元素</p>
</div>
<div class="div2">
相對(duì)瀏覽器可視窗口固定的盒子
</div>
<div class="div3">
相對(duì)版心固定的盒子
</div>
</body>
</html>
顯示效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-701116.html
到了這里，關(guān)于CSS筆記(黑馬程序員pink老師前端)定位的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[學(xué)習(xí)筆記]黑馬程序員python教程](https://imgs.yssmx.com/Uploads/2024/02/723818-1.png)
