absolute元素总盖住下方内容是因为它脱离文档流，后续内容按原位置布局而“钻入”其下方；根本原因是未设置父容器position: relative以提供定位上下文，导致absolute元素回退至视口定位，极易遮挡。
absolute 元素为什么总盖住下面的内容
因为 position: absolute 会让元素脱离文档流，浏览器渲染时完全不给它预留空间。后续内容照常从原来位置开始布局，结果就“钻到”绝对定位元素底下去了——这不是 z-index 没设对，是布局逻辑本身导致的。
常见错误场景：
- 给图片加文字标注，但文字飘到页面左上角，和图片错位
- 下拉菜单一展开就被隔壁的轮播图盖住
- 右上角悬浮按钮点不了，鼠标悬停没反应
根本原因往往不是层级不够高，而是没建立正确的定位上下文。
父容器必须显式设 position: relative
position: absolute 的元素会去找最近的「已定位祖先」作为参考点。如果没有，就回退到视口（相当于 position: fixed 效果），极易遮挡。
必须手动给父容器加：
parent { position: relative; }
注意：
-
display: flex或display: grid的父容器 ≠ 定位上下文，仍需加position: relative - 不要依赖
float或inline-block，它们不触发定位上下文 - 如果父容器本身高度为 0（比如只含
img且没设宽高），absolute 子元素即使设了top: 20px也会叠在兄弟元素上
文字盖不住图片？检查这三处硬性配置
遮罩文字看不见，90% 是以下三点漏掉：
- 没设
z-index：absolute 文字默认堆叠层级可能低于图片，尤其当图片父容器有z-index时；显式写z-index: 2或更高 -
img没设display: block：行内图片自带 baseline 空隙，导致父容器高度计算错误，absolute 定位偏移 - 文字颜色与背景冲突：白字压雪景图、黑字压深色图都难看清；加
text-shadow: 1px 1px 2px black或包裹一层半透background更稳妥
按钮点不了？可能是被透明 absolute 容器拦截
典型现象：按钮 hover 不变手型、click 事件完全不触发。
常见结构：
<div id="toolbar"></div><br><div id="render"></div><br><div id="options-container"> <!-- position: absolute; top: 0% --><br><div id="options"></div> <br> </div>
问题出在：#options-container 是 position: absolute 且 top: 0%，它从视口左上角开始渲染，哪怕子元素 #options 是 display: none，父容器依然占据空间并拦截所有鼠标事件。
修复方式：
- 把
top: 0%改成相对父容器的偏移（前提是父容器已设position: relative） - 或直接删掉
position: absolute，改用position: sticky/ Flex 布局等更可控方案
真正难的不是把元素“放上去”，而是让它在换图、缩放、不同设备下始终待在该待的位置——那两行 position: relative 和 z-index，不是可选项，是定位契约的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
