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

相关推荐
bin91531 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云3 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
曦月合一3 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球3 小时前
el-button按钮的loading状态设置
前端·javascript
无责任此方_修行中4 小时前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
学代码的小前端5 小时前
0基础学前端-----CSS DAY13
前端·css
dorabighead6 小时前
JavaScript 高级程序设计 读书笔记(第三章)
开发语言·javascript·ecmascript
engchina7 小时前
@media 的常用场景与示例
css·media
林的快手8 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
bug总结8 小时前
新学一个JavaScript 的 classList API
开发语言·javascript·ecmascript