設(shè)定父輩也是絕對(duì)定位效果和相對(duì)定位一樣,這兩個(gè)有什么區(qū)別?
<!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:absolute;???????
}
#box4{
??? width:99%;
? ? position:absolute;?
? ? bottom: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>
2018-08-21
其實(shí)在這段代碼中 box1/box3的絕對(duì)定位和相對(duì)定位是沒(méi)有多少差別的? ?這兩個(gè)加上定位的原因是給box2/box4的絕對(duì)定位做參照的? 如果沒(méi)有1/3的定位? 2/4 絕對(duì)定位就會(huì)參照body了,如果box1/box3 同樣需要定位的話(huà)? 這兩個(gè)就是有差別的,具體差別你可以把box2/box4 里的定位改為相對(duì)定位看一下。
順便說(shuō)一下 我覺(jué)得 課程里? 參照定位的元素必須加入position:relative; 這句話(huà)應(yīng)該是 參照定位的元素必須加上position,絕對(duì)相對(duì)都可以? 只是大家都習(xí)慣加relative。。。