html 之 relative 和 absolute

当子元素或伪元素使用绝对定位(position: absolute)时,它会相对于最近的相对定位(relative)的父元素进行定位

relative

当你给父元素添加 relative 时

相对定位本身并不会影响元素的布局,它仍然会按照正常的文档流排列

作用

  • 它成为子元素(例如伪元素)的定位参照点:当子元素或伪元素使用绝对定位(position: absolute)时,它会相对于最近的相对定位(relative)的父元素进行定位。如果父元素没有设置 relative,则子元素会相对于整个视口进行定位。
  • 元素自身可以使用 top、left、right、bottom 进行偏移:如果你在元素上设置了 position: relative,它可以相对于它自己在正常文档流中的位置进行偏移。

absolute

当你给子(伪)元素添加 属性 position: absolute。绝对定位会使该伪元素脱离正常的文档流,并且它的定位会相对于最近的设置了定位属性(position: relative、absolute、fixed 等)的父元素。

作用

  • 绝对定位的伪元素将不占据空间:因为伪元素不再参与正常的文档流,所以它不会对其他元素的布局产生影响。其他元素会像伪元素不存在一样进行布局。
  • 通过 top、left、right、bottom 定位:使用绝对定位的伪元素可以通过这些属性精确定位在父元素的某个位置。例如,before:top-0 和 before:left-0 将伪元素放置在父元素的左上角。

总结

  • 结合 relative 和 absolute 的工作原理
    当一个父元素使用 relative 定位,并且其子元素或伪元素使用 absolute 定位时,子元素会根据父元素的边界进行定位,而不是根据视口或文档流。这个模式非常常见,用于创建复杂的布局效果。
相关推荐
腾讯TNTWeb前端团队26 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试