css关于relative和absolute的区别

position:relative

定位为relative的元素脱离正常的文本流中,但其在正常流中的位置依然存在

relative定位是相对于其父组件的定位,初始位置在左上角,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性(TRBL)设定的位置是在初始位置的基础上移动,如right:1%设定后,元素会向左移动1%,即相对于父组件的右边界偏移1%的距离,父组件设定的padding有效。

position:absolute

定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不再存在,

这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。

  1. 如果设定TRBL,并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定,与relative不同的是,TRBL属性设定的是组件相对于浏览器或父组件的位置,而不是其相对于边界要偏移的距离,如right:1%设定后,组件的位置就到了浏览器或父组件最右边了,只是离右边界有1%的距离。
  2. 如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由 TRBL决定。即使父级有Padding属性,对其也不起作用,说简单点就是:它只坚持一点,就以父级左上角为原点进行定位,父级的padding对其根 本没有影响

总结:若想把一个定位属性为absolute的元素定位于其父级元素内,只有满足两个条件:设定TRBL;父级设定Position属性。

相关推荐
前端 贾公子3 小时前
Eruda:移动端网页调试利器
前端·javascript·vue.js
Hashan3 小时前
Elpis:抽离业务代码,发布NPM包
前端·javascript·vue.js
用户47949283569154 小时前
0.1加0.2为什么不等于0.3-答不上来的都挂了
前端·javascript·面试
rit84324994 小时前
C#实现的远程控制系统
前端·javascript·c#
南山安4 小时前
React学习:Vite+React 基础架构分析
javascript·react.js·面试
JS_GGbond4 小时前
JavaScript事件循环:餐厅里的“宏任务”与“微任务”
开发语言·javascript·ecmascript
CodeCraft Studio4 小时前
JavaScript图表库 DHTMLX Diagram 6.1 重磅发布:全新PERT模式上线,项目可视化能力再升级!
开发语言·javascript·ecmascript·dhtmlx·图表开发·diagram·javascript图表库
shuaijie05185 小时前
当表格数据量过大的时候,如何使用不分页进行展示
javascript·vue.js·ecmascript
How_doyou_do5 小时前
常见的设计模式
前端·javascript·设计模式
Gomiko5 小时前
JavaScript DOM 原生部分(五):事件绑定
开发语言·前端·javascript