課程
/前端開發(fā)
/HTML/CSS
/初識(shí)HTML(5)+CSS(3)-升級(jí)版
“相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位”這句話是什么意思,有實(shí)例解釋一下嗎,謝謝
2018-07-02
源自:初識(shí)HTML(5)+CSS(3)-升級(jí)版 13-6
正在回答
<!--?
解釋代碼如下:box1是box2的父類包含塊(即box2是在box1里面的塊元素),將box1定義position:relative, box2定義為 position:absolute, 則box2就可以根據(jù)box1進(jìn)行絕對(duì)定位。
box3和box4同理。
-->
<!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: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>
Otone 提問者
舉報(bào)
HTML(5)+CSS(3)基礎(chǔ)教程8小時(shí)帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽用法和意義
4 回答關(guān)于絕對(duì)定位與相對(duì)定位
1 回答關(guān)于絕對(duì)定位和相對(duì)定位的理解
2 回答關(guān)于絕對(duì)·定位的運(yùn)用
6 回答關(guān)于絕對(duì)定位的問題
1 回答關(guān)于絕對(duì)定位的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-07-02
<!--?
解釋代碼如下:box1是box2的父類包含塊(即box2是在box1里面的塊元素),將box1定義position:relative, box2定義為 position:absolute, 則box2就可以根據(jù)box1進(jìn)行絕對(duì)定位。
box3和box4同理。
-->
<!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: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>