大家知道css的position absolute默認是根據document來設置的，比如position:absolute后設置left:0;top:0這時候元素會顯示到頁面的左上角。
有時候我們需要在父元素的容器內設置相對的絕對位置
要做到這一點需要把父元素的position屬性設置為relative，設置為relative之后不設置left和top屬性，這時候父元素雖然是relative的，但是還是在原來位置。 然后把子元素的位置position設置為absolute的，并設置其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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
