相對(duì)定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相對(duì)定位</title>
<style type="text/css">
.box1{
height: 200px;
background-color: red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
定位：
- 定位指的就是將指定的元素?cái)[放到頁面的任意位置
通過定位可以任意的擺放元素
- 通過position屬性來設(shè)置元素的定位
-可選值：
static：默認(rèn)值，元素沒有開啟定位
relative：開啟元素的相對(duì)定位
absolute：開啟元素的絕對(duì)定位
fixed：開啟元素的固定定位（也是絕對(duì)定位的一種）
*/
/*
當(dāng)元素的position屬性設(shè)置為relative時(shí)，則開啟了元素的相對(duì)定位
1.當(dāng)開啟了元素的相對(duì)定位以后，而不設(shè)置偏移量時(shí)，元素不會(huì)發(fā)生任何變化
2.相對(duì)定位是相對(duì)于元素在文檔流中原來的位置進(jìn)行定位
3.相對(duì)定位的元素不會(huì)脫離文檔流
4.相對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)，塊還是塊，內(nèi)聯(lián)還是內(nèi)聯(lián)
*/
position: relative;
/*
當(dāng)開啟了元素的定位（position屬性值是一個(gè)非static的值）時(shí)，可以通過left right top bottom四個(gè)屬性來設(shè)置元素的偏移量
left：元素相對(duì)于其定位位置的左側(cè)偏移量
right：元素相對(duì)于其定位位置的右側(cè)偏移量
top：元素相對(duì)于其定位位置的上邊的偏移量
bottom：元素相對(duì)于其定位位置下邊的偏移量
通常偏移量只需要使用兩個(gè)就可以對(duì)一個(gè)元素進(jìn)行定位，
一般選擇水平方向的一個(gè)偏移量和垂直方向的偏移量來為一個(gè)元素進(jìn)行定位
*/
left: 100px;
top: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.s1{
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一個(gè)span</span>
</body>
</html>
絕對(duì)定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對(duì)定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
當(dāng)position屬性值設(shè)置為absolute時(shí)，則開啟了元素的絕對(duì)定位
絕對(duì)定位：
1.開啟絕對(duì)定位，會(huì)使元素脫離文檔流
2.開啟絕對(duì)定位以后，如果不設(shè)置偏移量，則元素的位置不會(huì)發(fā)生變化
3.絕對(duì)定位是相對(duì)于離他最近的、開啟了定位的祖先元素進(jìn)行定位的（一般情況，開啟了子元素的絕對(duì)定位，都會(huì)同時(shí)開啟父元素的相對(duì)定位）
如果所有的祖先元素都沒有開啟定位，則會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
4.絕對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.絕對(duì)定位會(huì)改變?cè)氐男再|(zhì)：
內(nèi)聯(lián)元素變成塊元素，
塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開
*/
position: absolute;
/*left: 100px;
top: 100px;*/
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
/*開啟box4的相對(duì)定位*/
/*position: relative;*/
}
.s1{
width: 100px;
height: 100px;
background-color: yellow;
/*開啟絕對(duì)定位*/
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
<span class="s1">我是一個(gè)span</span>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
當(dāng)元素的position屬性設(shè)置fixed時(shí)，則開啟了元素的固定定位
固定定位也是一種絕對(duì)定位，它的大部分特點(diǎn)都和絕對(duì)定位一樣
不同的是：
固定定位永遠(yuǎn)都會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
固定定位會(huì)固定在瀏覽器窗口某個(gè)位置，不會(huì)隨滾動(dòng)條滾動(dòng)
IE6不支持固定定位
*/
position: fixed;
left: 0px;
top: 0px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
