position: relative 使元素在原位置偏移但仍占文档流空间；2. position: absolute 使元素脱离文档流，相对于最近已定位祖先定位，常用于弹窗等精确布局场景。
在CSS中，通过 position 属性可以控制元素的定位方式，实现相对或绝对布局。这个属性决定了元素如何脱离正常文档流以及它的偏移行为。
设置 position: relative 后，元素仍保持在正常文档流中，但可以通过 top、bottom、left、right 属性相对于它原本的位置进行偏移。
使用场景：微调元素位置，同时不影响其他元素布局。示例：
.element {
position: relative;
top: 10px;
left: 20px;
}
该元素会从原来的位置向右移动20像素，向下移动10像素，但原来的空间仍然保留。
立即学习“前端免费学习笔记（深入）”；
设置 position: absolute 后，元素完全脱离文档流，不再占据空间，并相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先）进行定位。若没有这样的祖先，则相对于初始包含块（通常是视口）。
使用场景：弹窗、悬浮按钮、精确控制元素位置。示例：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 100px;
}
此时 .child 会相对于 .parent 定位，出现在其内部左上角偏移 (100px, 50px) 的位置。
以上就是CSS定位属性如何设置_position实现绝对或相对布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
790
收藏
