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

相关推荐
Jonathan Star3 分钟前
在 JavaScript 中, `Map` 和 `Object` 都可用于存储键值对,但设计目标、特性和适用场景有显著差异。
开发语言·javascript·ecmascript
自由日记19 分钟前
css学习9
前端·css·学习
拖拉斯旋风22 分钟前
你不知道的javascript:深入理解 JavaScript 的 `map` 方法与包装类机制(从基础到大厂面试题)
前端·javascript
over69723 分钟前
《JavaScript的"魔法"揭秘:为什么基本类型也能调用方法?》
前端·javascript·面试
冴羽1 小时前
这是一个很酷的金属球,点击它会产生涟漪……
前端·javascript·three.js
烛阴1 小时前
为什么 `Promise.then` 总比 `setTimeout(..., 0)` 快?微任务的秘密
前端·javascript·typescript
张愚歌1 小时前
轻松打造个性化Leaflet地图标记
前端·javascript
华仔啊1 小时前
CSS实现高级流光按钮动画,这几行代码堪称神来之笔
前端·css
用户3777967210961 小时前
新值依赖旧值?并发更新的“坑”
javascript
_处女座程序员的日常2 小时前
如何预览常见格式word、excel、ppt、图片等格式的文档
前端·javascript·word·excel·开源软件