css position absolute相對於父元素的設置方式


手機賺錢怎么賺,給大家推薦一個手機賺錢APP匯總平台:手指樂(http://www.szhile.com/),辛苦搬磚之余用閑余時間動動手指,就可以日賺數百元

 

大家知道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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM