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 定位时,子元素会根据父元素的边界进行定位,而不是根据视口或文档流。这个模式非常常见,用于创建复杂的布局效果。
相关推荐
我怎么能这么帅气1 分钟前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
迷路的小绅士13 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
前端snow21 分钟前
前端全栈第一课:用typeorm向数据库添加数据
前端
小希爸爸22 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师38 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭39 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码1 小时前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger1 小时前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话1 小时前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时1 小时前
React与Vue表单的对比差异
前端·javascript