首頁 > 開發者 > JavaScript
將子div定位於父div的右下角的代碼執行個體，div執行個體
將子div定位於父div的右下角的代碼執行個體:
可能在實際應用中，很少有這樣的設定，這裡分享這段代碼的目的是為了讓初學者熟悉一下關於定位的應用。
代碼如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">#father{ width:600px; height:600px; background:green; position:relative}#father #children{ width:200px; height:200px; background:red; position:absolute; right:0; bottom:0}</style></head><body><div id="father"> <div id="children">螞蟻部落</div></div></body></html>
代碼實現了我們的要求，可以將子項目定位於父元素的右下角，實現原理非常的簡單，就是將父元素設定為相對定位，然後將子項目設定為絕對位置，這樣子項目的定位參考對象就是這個父元素，然後再講子項目的right和bottom屬性值設定為0即可實現此效果。
相關閱讀:
1.絕對位置可以參閱CSS的絕對位置一章節。
2.定位參考對象可以參閱position絕對位置以哪個對象為參考一章節。
3.right屬性可以參閱CSS的right屬性一章節。
4.bottom屬性可以參閱CSS的bottom屬性一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11768
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
