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 定位时,子元素会根据父元素的边界进行定位,而不是根据视口或文档流。这个模式非常常见,用于创建复杂的布局效果。
相关推荐
哆啦A梦1588几秒前
Element-Plus
前端·vue.js·ts
IT_陈寒7 分钟前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子30 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia42 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.1 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia1 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie1145141911 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd1 小时前
3种XSS攻击简单案例
前端·xss
盖头盖1 小时前
【xss基本介绍】
前端·xss