css单独使用定位position: absolute 和 position: relative;

position: absolute;

当元素被设置为 position: absolute; 时,它会脱离正常的文档流,并相对于其最近的非 static 定位的父元素(即 position 属性为 absolute、relative、fixed 或 sticky 的元素)进行定位。如果没有这样的父元素,那么它会相对于初始包含块(通常是视口)进行定位。

使用 top、right、bottom 和 left 属性可以指定元素相对于其参考点的位置。

.absolute-element {

position: absolute;

top: 10px;

left: 20px;

}

position: relative;

当元素被设置为 position: relative; 时,它会相对于其正常位置进行定位。这意味着你可以使用 top、right、bottom 和 left 属性来移动元素,但是它会保留在文档流中的空间。

相对定位经常用于微调元素的位置,而不影响其他元素的布局。

.relative-element {

position: relative;

top: -10px;

left: 20px;

}

这两种定位方法都可以单独使用,但它们的行为不同,适用于不同的场景。选择哪种方法取决于你的具体需求和布局目标。

相关推荐
jinanwuhuaguo4 分钟前
OpenClaw执行奇点——因果链折叠与责任悬置的时间哲学(第十九篇)
前端·人工智能·安全·重构·openclaw
为美好的生活献上中指9 分钟前
本地虚拟机部署redis集群
前端·redis·ubuntu·bootstrap·html·redis集群
ConardLi28 分钟前
开源我的 GPT-Image2 生图 Skill,附大量玩法指南
前端·人工智能·后端
我是Superman丶33 分钟前
Antigravity Retry 自动重试脚本
前端·javascript·vue.js
是大强41 分钟前
nvm安装node成功npm失败
前端·npm·node.js
im_AMBER1 小时前
Leetcode 162 除了自身以外数组的乘积 | 接雨水
开发语言·javascript·数据结构·算法·leetcode
\xin1 小时前
pikachu自编CSRF(GET),CSRF(POST),CSRF(token)
前端·csrf
是大强1 小时前
前端一个项目用node20 一个项目用node14 怎么切换
前端
不老刘1 小时前
Git Cherry-Pick:微前端架构下的“精准医疗”与最佳实践
前端·git
Komorebi_99991 小时前
前端开发|18 个高频易错知识点汇总(HTML+CSS+JS+Vue)面试 & 开发通用
javascript·css·html