CSS相對定位是基于元素當前位置進行移動的一種定位方式,相對定位的位置屬性包括top、bottom、left、right,使用相對定位屬性后元素并不會脫離文檔流。
在CSS中使用相對定位屬性時,值可以使用如下方式:
position:relative; top:20px; /* 上移20像素 */ bottom:20px; /* 下移20像素 */ left:20px; /* 左移20像素 */ right:20px; /* 右移20像素 */
值得注意的是,相對定位屬性值的可選單位包括px、em、rem、%等,其特點如下:
- px:固定像素值
- em:相對于當前元素的字體大小
- rem:相對于根元素html的字體大小
- %:相對于包含元素的百分比
另外,在使用相對定位屬性時,還需要注意以下幾點:
- 相對定位只是相對于元素自身進行移動,不會改變元素的大小和位置
- 相對定位不會脫離文檔流,會影響其他元素的定位
- 相對定位仍然占據原來的位置,因此可能會出現重疊的情況
相對定位的使用場景包括:微調元素位置、懸浮元素效果、圖文混排等等。
上一篇mysql實訓報告原理
下一篇css相對定位后居中