父元素设为relative作为定位基准，子元素设为absolute并用top、right等精确定位，常用于图标覆盖、下拉菜单等场景。
在CSS布局中，relative和absolute经常配合使用，实现精确的定位效果。关键在于：将父元素设为 position: relative，子元素设为 position: absolute，这样子元素就能相对于父元素进行定位。
设置 position: relative 的元素不会脱离文档流，它仍然占据原来的空间。但它会成为其内部 absolute 定位元素的“定位基准”。
如果没有设置 relative，absolute 元素会一直向上寻找最近的已定位祖先，直到 body。
典型用法如下：
立即学习“前端免费学习笔记（深入）”；
示例代码：
这种组合常用于：
例如做一个卡片角落的“新”标签：
基本上就这些。掌握好“relative 提供坐标系，absolute 脱离文档流并相对定位”的逻辑，就能灵活控制元素位置了。
以上就是在css中如何用relative和absolute组合布局的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
832
收藏
