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

相关推荐
WebDesign_Mu1 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了1 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎1 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端1 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
携欢2 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
勤奋菲菲2 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀3 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云和数据.ChenGuang3 小时前
vue中构建脚手架
前端·javascript·vue.js
渣哥3 小时前
面试官最爱刁难:Spring 框架里到底用了多少经典设计模式?
javascript·后端·面试
朱昆鹏4 小时前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能