關(guān)于絕對定位的問題
如果想為元素設(shè)置層模型中的絕對定位，需要設(shè)置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位。
誰能幫我舉個(gè)例子嗎？
qq_一生之久_0
2016-04-01
5 回答
舉報(bào)
0/150
提交
取消
2016-04-01
http://idcbgp.cn/qadetail/66082
這個(gè)已經(jīng)有人回答過了
2016-04-01
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>相對參照元素進(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; ?????????? } </style> </head> <body> <div?id="box1"> <div?id="box2">相對參照元素進(jìn)行定位</div> </div> </body> </html>這里box2最接近的具有定位屬性的父包含塊為box1。box1的定位屬性為relative,box2就可以用left和top以box1為參照進(jìn)行絕對定位。
2016-04-01
<style type="text/css">
div{border:2px red solid;}
/*下面是任務(wù)部分*/
#box1{
? ? width:200px;
? ? height:200px;
? ? position:relative; ? ? ??
}
#box2{
? ? width:99%;
? position:absolute;
? ? bottom:0px; ?
}
</style>
<body>
<div id="box1">
? ? <img src="http://img1.sycdn.imooc.com//541a7d8a00018cf102000200.jpg">
? ? <div id="box2">當(dāng)我還是三年級的學(xué)生時(shí)是一個(gè)害羞的小女生。</div>
</div>
</body>
這是加position屬性前后的效果對比圖。希望對你有幫助。
2016-04-01
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相對參照元素進(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">相對參照元素進(jìn)行定位</div>
</div>
<h1>下面是任務(wù)部分</h1>
<div id="box3">
? ? <img src="http://img1.sycdn.imooc.com//541a7d8a00018cf102000200.jpg">
? ? <div id="box4">當(dāng)我還是三年級的學(xué)生時(shí)是一個(gè)害羞的小女生。</div>
</div>
</body>
</html>
2016-04-01
http://blog.csdn.net/tomatozq/article/details/7178144網(wǎng)上看到這個(gè)，可能會(huì)對你有幫助！