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属性。

相关推荐
长风清留扬29 分钟前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
m0_7482478043 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
学代码的小前端2 小时前
0基础学前端-----CSS DAY9
前端·css
joan_852 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特2 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248943 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235613 小时前
从零开始学前端之HTML(三)
前端·html
旭久4 小时前
SpringBoot的Thymeleaf做一个可自定义合并td的pdf表格
pdf·html·springboot