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;

}

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

相关推荐
Java后端的Ai之路17 小时前
【AIAgent开发】-Agent工具封装成CLI(纯干货!!!)
java·javascript·人工智能·agent·cli
薛定谔的猫-菜鸟程序员17 小时前
Electron开发超详细教程(从入门到放弃)
前端·javascript·electron
最强小杰17 小时前
DeepSeek V4 Flash + Codex CLI 接入教程:原生 Responses API 适配,从配置到跑通收藏这篇就够了(2026)
java·前端·python·ai
静水leo18 小时前
使用 Whistle 拦截接口并模拟后端响应
前端
掘金者阿豪18 小时前
SQL Server数据迁移完成后,凌晨的数据库告警该怎么查?
前端·后端
JudithHuang18 小时前
React 嵌套路由与布局
前端·react.js·arcgis·react·react router
啾咪orJIUMI18 小时前
Vue 3 + SCSS 实现全屏系统门户:五栏展开与灯光联动
css
htzyl20618 小时前
前端阶梯——第四十三章、实战二:待办清单To-Do
前端·javascript·html
程序员大阳18 小时前
HTML+CSS+JS对话式实战(1)-开篇:认识我们要做的社团活动发布平台
javascript·css·html·实战·系统·平台·社团活动发布