首頁 > web前端 > html教學 > HTML中三種定位relative,absolute,fixed後,盒子的百分比寬度及位置易錯點

HTML中三種定位relative,absolute,fixed後,盒子的百分比寬度及位置易錯點

高洛峰
發布: 2017-02-20 11:11:06
原創
1277 人瀏覽過

1 . 相對定位relative:顧名思義,相對定位是相對於自己的位置來進行偏移,如下圖:

              HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

    以盒子中心為基準、為每個盒子中心為基準、為每個盒子中心而為基準條邊的正方向,例:

      向右移動20px :  程式碼為left:20px;或right:-20px;

     〠下移動碼:-20px;

 

      HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

2 . 絕對定位:absolute

  以其第一個定位的祖輩級盒子為標準,定位祖輩級的中心方向為正,如下圖:

    HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

3 .固定定位fixed,是獨立於body標籤之外的,只以網頁html為基準的,其定位方式與絕對定位相似.都是以中心方向為正方向.

  其寬度百分比也是只以html為基準的.

 

注:  1.如果沒有對父級定位,絕對定位absolute則預設以其第一個定位的祖輩為標準.

  2.絕對定位和相對定位的盒子,其寬度百分比是以第一個定位祖輩為基準的;預設的是以body為基準的

更多HTML中三種定位relative,absolute,fixed後,盒子的百分比寬度及位置易錯點 相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板