父元素设为relative作为定位基准，子元素设为absolute并用top、right等精确定位，常用于图标覆盖、下拉菜单等场景。
在CSS布局中，relative和absolute经常配合使用，实现精确的定位效果。关键在于：将父元素设为 position: relative，子元素设为 position: absolute，这样子元素就能相对于父元素进行定位。
1. 基本原理：relative 作为“参考框”
设置 position: relative 的元素不会脱离文档流，它仍然占据原来的空间。但它会成为其内部 absolute 定位元素的“定位基准”。
如果没有设置 relative，absolute 元素会一直向上寻找最近的已定位祖先，直到 body。
2. 使用方法：父子配合定位
典型用法如下：
立即学习“前端免费学习笔记（深入）”；
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
- 父容器添加 position: relative
- 需要精确定位的子元素添加 position: absolute
- 通过 top、right、bottom、left 控制子元素位置
示例代码：
父容器（relative）
绝对定位的子元素
3. 实际应用场景
这种组合常用于：
- 图标或关闭按钮覆盖在卡片右上角
- 下拉菜单或提示框相对于触发元素定位
- 轮播图中的左右箭头
- 加载遮罩层居中覆盖内容
例如做一个卡片角落的“新”标签：
基本上就这些。掌握好“relative 提供坐标系，absolute 脱离文档流并相对定位”的逻辑，就能灵活控制元素位置了。
