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;

}

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

相关推荐
悟空瞎说5 分钟前
前端老鸟实战:纯 CSS 实现小红书「真・瀑布流」,零 JS、自动错落、生产可用
前端
yuki_uix6 分钟前
当 reduce 遇到二维数据:从"聚合直觉"到"复合 Map"的思维跃迁
前端·javascript·面试
我叫黑大帅9 分钟前
Vue3中的computed 与 watch 的区别
前端·javascript·面试
暗不需求11 分钟前
# 一文搞懂 JavaScript 内存机制:从栈和堆,到闭包为什么“活得更久”
前端·javascript
CharlesY11 分钟前
JavaScript HTML5 Cache Manifest:离线应用缓存机制考古
前端·javascript
yuki_uix11 分钟前
前端解题的 6 个思维模型:比记答案更有用的东西
前端·面试
Bigger27 分钟前
第三章:我是如何剖析 Claude Code 工具系统与命令执行机制的
前端·claude·源码阅读
GISer_Jing35 分钟前
告别手搓架构图!Excalidraw+AI Skills 高效绘制手绘风技术图
前端·人工智能·react.js
jiayong2337 分钟前
第 7 课:第三轮真实重构,拆出新增任务弹窗
服务器·前端·重构
钛态37 分钟前
前端WebSocket实时通信:别再用轮询了!
前端·vue·react·web