relative和absolute運(yùn)用
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相對(duì)參照元素進(jìn)行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1,#box2,h1{
? ? margin-left:0px;
? ? margin-top:0px;
}
#box1{
? ? width:200px;
? ? height:200px;
? ? position:relative;
? ? ? ? ??
}
#box2{
? position:absolute;
top:20px;
left:30px;
? ? ? ? ??
}
/*下面是任務(wù)部分*/
#box3{
? ? height:200px;
? ? width:200px;
? ? position:relative;
? ??
? ??
}
?#box4{
? ? ?width:99%;
? ? ?position:absolute;
? ? ?bottom:0;
? ? ?left:0px;
?} ??
?
</style>
</head>
<body>
<div id="box1">
<div id="box2">相對(duì)參照元素進(jìn)行定位</div>
</div>
<h1>下面是任務(wù)部分</h1>
<div id="box3">
? ? <img src="http://img1.sycdn.imooc.com//541a7d8a00018cf102000200.jpg">
? ? <div id="box4">當(dāng)我還是三年級(jí)的學(xué)生時(shí)是一個(gè)害羞的小女生。</div>
</div>
</body>
</html>為什么box3要用relative,box4相對(duì)于父級(jí)絕對(duì)定位嗎，那現(xiàn)在box3已經(jīng)是box4的父級(jí)了啊，為什么還要用relative
2018-04-19
首先明確絕對(duì)定位：想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。
這里“定位屬性”重點(diǎn)，如果box3不加position:relative使box3具有定位屬性的話，那么box4的絕對(duì)定位就會(huì)相對(duì)于body元素去定位了。
然后我又想為什么box3非要用relative相對(duì)定位呢？用absolute絕對(duì)定位行不行？經(jīng)過測(cè)試發(fā)現(xiàn)也可以。也能夠?qū)崿F(xiàn)box4相對(duì)于box3的相對(duì)定位。
那么我又考慮到，用relative對(duì)box3進(jìn)行相對(duì)定位一定是有原因的。經(jīng)過研究我發(fā)現(xiàn)，如果用absolute對(duì)box3進(jìn)行相對(duì)定位的話，box3會(huì)從文檔流中脫離出來，造成后面的內(nèi)容混亂,box3后面的內(nèi)容跑到box3前面（我在box3前后加了一大段文字用來測(cè)試），因?yàn)閍bsolute決定定位的特性就是會(huì)脫離文檔流。
而relative相對(duì)定位的一大特性就是“初始位置保持不變”，不會(huì)造成后面內(nèi)容的混亂。
說的有點(diǎn)亂，你可以把我代碼中box3那段relative刪除，再換成absolute分別看一下效果就了解了，哪里有問題我們繼續(xù)討論
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相對(duì)參照元素進(jìn)行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
? ? width:200px;
? ? height:200px;
? ? position:relative;
? ? ? ? ??
}
#box2{
? position:absolute;
top:20px;
left:30px;
? ? ? ? ??
}
/*下面是任務(wù)部分*/
#box3{
? ? width:200px;
? ? height:200px;
? ? position:relative;? ? ? ?
}
#box4{
? ? width:99%;
? position:absolute;
bottom:0;
? ??
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">相對(duì)參照元素進(jìn)行定位</div>
</div>
<h1>下面是任務(wù)部分</h1>
1234123412341234123412341234132
<div id="box3">
? ? <img src="http://img1.sycdn.imooc.com//541a7d8a00018cf102000200.jpg">
? ? <div id="box4">當(dāng)我還是三年級(jí)的學(xué)生時(shí)是一個(gè)害羞的小女生。</div>
</div>
asdfasdfasdfasdfasdfasdfasdfa
</body>
</html>
2018-04-17
一父一子
2018-04-17
子絕父相，兒子絕對(duì)定位，父親就要相對(duì)定位，不然兒子就會(huì)參照瀏覽器進(jìn)行定位
2018-04-17
box3是父級(jí)，所以要設(shè)置一個(gè)參照定位position:relative，意思就是有人要參照你的定位了