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;

}

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

相关推荐
weixin_382395232 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__2 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.2 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~3 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华4 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子6 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅6 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni7 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学8 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端