是的，position: relative 的元素仍然在文档流中，占据原位置，不影响其他元素布局，父容器高度包含它，且能激活 z-index。
相对定位元素还在文档流里吗
是的，position: relative 的元素**仍然在文档流中**，它占据原本的位置，其他元素照常围绕它排布。这是它和 absolute、fixed 最本质的区别。
所谓“不脱离文档流”，意思是：浏览器在计算布局时，仍会为这个元素预留原始空间，哪怕你用 top、left 把它挪走了，它原来占的地方不会被别人补上。
- 如果没设置
top/right/bottom/left，元素视觉位置和行为都跟默认一样 - 一旦设置了偏移值，元素会从原位置“视觉上”移动，但其他元素完全感知不到——它们还按原来的位置渲染
- 父容器的
height会包含这个相对定位元素（即使它被向上偏移出视口）
为什么用 relative 却看不到偏移效果
常见原因是：只写了 position: relative，但漏掉了偏移属性，或者偏移值为 0。相对定位本身不触发位移，必须配合 top、left 等才生效。
-
top: 20px表示元素**顶部边缘**相对于自己原本位置下移 20px（注意：不是相对于父容器） -
left: -10px是向左平移，可能造成部分区域超出父容器，但不会影响兄弟元素布局 - 若同时设
top和bottom，top优先级更高，bottom被忽略（除非top为auto）
relative 定位对 z-index 有没有作用
有，而且很关键：只有定位元素（即 position 值不为 static）才能使用 z-index 控制层叠顺序。所以 relative 是最轻量的“激活 z-index”的方式。
立即学习“前端免费学习笔记（深入）”；
- 不写
position: relative，直接加z-index是无效的 - 即使不偏移，仅加
position: relative; z-index: 1就能让该元素盖在普通块元素之上 - 多个
relative元素之间，z-index按数值大小比较；同层无z-index则按 HTML 顺序，后出现的在上
relative 和 absolute 混用时的坑
当 absolute 子元素的父级是 relative，子元素的定位基准就变成这个父级——这是常用技巧，但容易误以为只要加了 relative 就自动“框住”子元素。
- 父元素必须显式设
position: relative（不能是static，也不能靠继承） - 如果父元素高度由内容撑开，而子元素
absolute向上偏移，可能导致父容器高度计算异常（比如子元素脱离后，父容器高度塌缩） - 父元素若设了
overflow: hidden，而absolute子元素偏移出边界，会被裁剪——这点和relative自身偏移不同，后者不会被裁剪
z-index、稳稳托住绝对定位后代——这些事，全靠它没真正离开。 
