相对定位父元素为绝对定位子元素提供定位基准，子元素通过top、left等属性相对于父元素定位，常用于下拉菜单、模态框、图标叠加等场景。
当在 css 中使用 relative 定位的父元素包含 absolute 定位的子元素时，子元素的定位将相对于这个父元素进行。这是构建复杂布局中非常常见且实用的技术。
relative 父元素的作用
一个设置了 position: relative; 的元素会成为其内部 position: absolute; 子元素的定位上下文。也就是说，子元素不会再相对于整个页面或视口来定位，而是以最近的具有定位属性（非 Static）的祖先元素为基准。
- 如果没有设置 relative 的祖先元素，absolute 元素会一直向上查找，直到
<html>根元素 - 一旦父级设置了 relative，absolute 子元素就“归属于”它
absolute 子元素如何定位
子元素通过 top, right, bottom, left 属性来确定相对于父元素的位置。这些值是从父元素的边框开始计算的。
- top: 20px; 表示距离父元素上边缘 20px
- left: 10px; 表示距离父元素左边缘 10px
- 可以使用负值实现超出父容器的定位效果
典型使用场景
这种嵌套结构适合用于：
立即学习“前端免费学习笔记（深入）”；
- 下拉菜单：菜单项 absolute 定位在导航条（relative）下方
- 模态框或提示气泡：固定在某个按钮或区域附近
- 图标叠加：如删除图标放在图片右上角
- 自定义滚动条或悬浮操作按钮
基本上就这些。掌握 relative 和 absolute 的配合，是精准控制元素位置的关键。不复杂但容易忽略细节，比如父元素忘了设 relative，结果子元素跑到页面其他位置去了。
暂无评论