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 定位时,子元素会根据父元素的边界进行定位,而不是根据视口或文档流。这个模式非常常见,用于创建复杂的布局效果。
相关推荐
冴羽15 分钟前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom16 分钟前
Langflow:打造AI应用的强大工具
前端·面试·github
前端小张同学25 分钟前
AI编程-cursor无限使用, 还有谁不会🎁🎁🎁??
前端·cursor
yanxy51229 分钟前
【TS学习】(15)分布式条件特性
前端·学习·typescript
uhakadotcom1 小时前
Caddy Web服务器初体验:简洁高效的现代选择
前端·面试·github
前端菜鸟来报道1 小时前
前端react 实现分段进度条
前端·javascript·react.js·进度条
花楸树1 小时前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro1 小时前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手1 小时前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试