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;

}

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

相关推荐
卸任9 小时前
Vibe coding工具使用心得
前端·ai编程
brien910 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance10 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M10 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写10 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李10 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易10 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding11 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript
风骏时光牛马11 小时前
前沿视界
前端
kyriewen11 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员