Relative與Absolute組合使用
我設(shè)置的時(shí)候沒(méi)有按照文章的內(nèi)容設(shè)置，而是給box3設(shè)置了絕對(duì)定位，然后給box4設(shè)置了相對(duì)定位。為什么也可以？不是說(shuō)了
Relative與Absolute組合使用不是應(yīng)該是參照定位的元素必須是相對(duì)定位元素的父元素么
祈祈祈祈禱
2016-08-02
4 回答
舉報(bào)
0/150
提交
取消
2016-08-02
這里和box3的position并無(wú)關(guān)系 ?是你的bottom的設(shè)置相對(duì)于body的位置，50px正好在哪里，因?yàn)閎ox4中的position是relative所以并不會(huì)造成覆蓋
2016-08-02
<!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:relative;?? ?
?? ?bottom:50px;
?? ?
}
</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>
這個(gè)是我剛試的還是可以呀
2016-08-02
我設(shè)置的box3絕對(duì)定位，box4相對(duì)定位，顯示不正確，但是box3和box4都設(shè)置為絕對(duì)位置就正確
2016-08-02
我試了給box3設(shè)置了絕對(duì)定位，給box4設(shè)置了相對(duì)定位，顯示的并不可以。。。