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

? ? ? ? ? ??　　

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

　　　　　　向右移動20px　:　　代碼為left:20px;或者right:-20px;

　　　　　　向下移動20px ?: ? ? ?代碼為top:20px;或者bottom:-20px;

?

　　　　　　

2 . 絕對定位:absolute

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

　　　　

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

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

?

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

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

　　

總結

以上是生活随笔為你收集整理的HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。