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

相关推荐
荔枝一杯酸牛奶13 分钟前
HTML 表单与表格布局实战:两个经典作业案例详解
前端·html
yuguo.im1 小时前
我开源了一个 GrapesJS 插件
前端·javascript·开源·grapesjs
安且惜1 小时前
带弹窗的页面--以表格形式展示
前端·javascript·vue.js
米奇妙妙wuu1 小时前
css实现文字和边框同样的渐变色效果
css·html·css3
摘星编程2 小时前
用React Native开发OpenHarmony应用:NFC读取标签数据
javascript·react native·react.js
AGMTI4 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript
不吃香菜的猪4 小时前
使用@vue-office/pdf时,pdf展示不全
javascript·vue.js·pdf
wuhen_n4 小时前
TypeScript的对象类型:interface vs type
前端·javascript·typescript
css趣多多5 小时前
props,data函数,computed执行顺序
前端·javascript·vue.js
一个不称职的程序猿5 小时前
构建优雅的 Vue.js 表情包选择器:一个功能丰富且可定制的 Emoji Picker 组件
前端·javascript·vue.js