HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
生活随笔
收集整理的這篇文章主要介紹了
HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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后,盒子的百分比宽度及位置易错点的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 浏览器如何生成URL
- 下一篇: HTML条件注释