background: linear-gradient() 没效果的主因是元素无渲染尺寸，需确保其有 width/height 或由内容、padding 等撑开；absolute/fixed 定位时父容器须设 relative 且自身有尺寸约束，渐变应作用于具备可渲染区域的元素本身。
定位元素用 background: linear-gradient() 为什么没效果
常见原因是 position 元素本身没有尺寸（宽高为 0），或其子元素撑开空间但渐变写在了父容器上，而父容器未设 height 或 width。CSS 渐变本质是背景图，必须作用在有渲染面积的盒模型上。
实操建议：
- 确认该元素设置了明确的
width和height，或通过内容、min-height、padding等方式产生高度 - 若使用
position: absolute，注意它脱离文档流，父容器需设position: relative并确保自身有尺寸约束 - 避免把渐变写在空标签（如
<div></div>）上却不设任何尺寸
absolute 定位 + 渐变背景的典型写法
适用于遮罩层、按钮悬浮态、卡片标题条等场景。关键是让定位元素「自己」具备可渲染区域。
示例（顶部渐变遮罩）：
立即学习“前端免费学习笔记（深入）”；
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
pointer-events: none; /* 防止遮挡下层交互 */
}注意点：
-
pointer-events: none不是必须，但多数遮罩需要透传点击 - 用
rgba()控制透明度比opacity更安全——后者会污染子元素 - 若要响应式高度，可用
min-height: 10vh替代固定height
fixed 定位元素加渐变时的滚动问题
当 position: fixed 元素含渐变背景并希望随页面滚动“露出”不同色带（比如视差渐变头图），直接写 background: linear-gradient() 是静态的，不会随滚动变化。
解决思路不是改 background，而是控制渐变的「起点/终点位置」：
- 用
background-position: 0% 0%, 0% 100%配合background-size做分层，再结合transform: translateY()模拟滚动偏移（需 JS 监听 scroll） - 更轻量的做法：用
background-attachment: fixed——但仅对position: static或relative有效，fixed元素上该属性被忽略 - 真正可靠的方式是把渐变作为伪元素
::before绘制，并用transform: translateZ(0)触发硬件加速，再 JS 控制其top或background-position
z-index 与渐变层级冲突的排查
有时渐变“看不见”，其实是被同级其他 position 元素盖住了，尤其当多个 absolute 或 fixed 元素堆叠时。
检查顺序：
- 确认该元素有
z-index，且值大于兄弟定位元素 - 注意
z-index只在「同一层叠上下文」内生效；父容器若设了transform、opacity 、<code>will-change等，会创建新层叠上下文，导致子元素的z-index仅在该上下文中比较 - 用浏览器开发者工具的「Layers」面板看实际渲染层级，比单纯查 CSS 更准
渐变本身不触发层叠上下文，但它依附的定位元素是否被包裹在某个隐式创建新 stacking context 的父容器里，这点最容易被忽略。
