<!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:0; ? ??}/*下面是觀察部分*/#box5{? ? width:200px;? ? height:200px;? ? position:absolute;? ? ? ? ??}#box6{? ? ?position:absolute; top:20px; left:30px;? ? ? ? ??}</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><br/><br/><h2>下面是觀察部分</h2><div id="box5">? ? <div id="box6">相對(duì)參照元素進(jìn)行定位</div></div></body></html>結(jié)果圖:我試過將設(shè)置定位的元素及其父輩元素都設(shè)定為absolute,如圖所示，她們與其他父輩的兄弟元素不會(huì)重疊，于是我就以為可以這樣組合。但是，當(dāng)我把box3和box4都設(shè)為absolute時(shí),任務(wù)部分與觀察部分就重疊起來，所以用relative去設(shè)置父輩元素，是為了避免這種情況出現(xiàn)，其實(shí)我的理解是，只有定位脫離了文檔流，那么后面元素的定位就會(huì)收到影響，不知道我這樣的理解對(duì)不對(duì)
探索為什么相對(duì)定位的元素的父輩元素一定要設(shè)為position:relative
qq_人生是一場(chǎng)修行_03188787
2016-07-18 14:55:59
