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 定位时,子元素会根据父元素的边界进行定位,而不是根据视口或文档流。这个模式非常常见,用于创建复杂的布局效果。
相关推荐
xiyusec19 分钟前
HTML基础
前端·html
好开心331 小时前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互
xChive1 小时前
优化表单交互:在 el-select 组件中嵌入表格显示选项
前端·vue.js·交互·element-plus
tian-ming1 小时前
(十八)JavaWeb后端开发案例——会话/yml/过滤器/拦截器
java·开发语言·前端
_jacobfu1 小时前
mac2024 安装node和vue
前端·javascript·vue.js
Ztiddler1 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
三天不学习1 小时前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm
羽羽Ci Ci1 小时前
axios vue.js
前端·javascript·vue.js
岳哥i2 小时前
前端项目接入单元测试手册
前端·单元测试
小彭努力中2 小时前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js