大家知道css的position absolute默認(rèn)是根據(jù)document來設(shè)置的，比如position:absolute后設(shè)置left:0;top:0這時候元素會顯示到頁面的左上角。
有時候我們需要在父元素的容器內(nèi)設(shè)置相對的絕對位置
要做到這一點需要把父元素的position屬性設(shè)置為relative，設(shè)置為relative之后不設(shè)置left和top屬性，這時候父元素雖然是relative的，但是還是在原來位置。 然后把子元素的位置position設(shè)置為absolute的，并設(shè)置其left，top，right，bottom屬性，這樣就是相對于父元素的絕對位置了。
如下html示例代碼：
<!doctype html><html> <style type="text/css"> #father { position: relative; width:600px; margin:auto; height:400px; border:1px solid red; } #son1 { position: absolute; top: 0; background:#f0f0f0; } #son2 { position: absolute; bottom: 0; background:blue; } </style> <body> <div id="father"> <div id="son1">I am son1</div> <div id="son2">I am son2</div> </div> </body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
