解决伪元素在祖父元素背景下被遮挡的问题
前端开发中，常需为文字添加渐变或阴影效果，伪元素结合绝对定位是常用方法。然而，当祖父元素有背景时，伪元素可能被遮挡。
以下代码示例演示了如何使用伪元素创建文字渐变和阴影：
示例文本
.header {
width: 100%;
height: 100px;
/* 添加背景色，用于测试遮挡效果 */
background-color: lightgray;
position: relative; /* 关键：为祖父元素添加相对定位 */
}
.text {
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, red 0%, green 100%);
-webkit-background-clip: text;
background-clip: text;
font-size: 40px;
font-weight: bold;
letter-spacing: 9px;
position: relative; /* 关键：为父元素添加相对定位 */
}
.text::before {
content: attr(data-text);
position: absolute;
color: transparent;
text-shadow: 0 4px 2px blue;
z-index: 1; /* 关键：调整z-index值 */
}
在上述代码中，我们尝试过直接使用 z-index 来解决问题，但效果不佳。这是因为 z-index 的作用依赖于层叠上下文。 祖父元素的 z-index 并不会直接影响其后代元素的层叠顺序。
关键在于为祖父元素（.header）添加 position: relative; ，以及为父元素（.text）添加 position: relative;， 这创建了包含伪元素的局部层叠上下文。 然后，通过设置伪元素（.text::before）的 z-index: 1;，确保其位于祖父元素背景之上。
通过正确创建层叠上下文并调整 z-index 值，可以有效解决伪元素被祖父元素背景遮挡的问题，实现预期的视觉效果。 记住，z-index 仅在父元素具有 position 属性（非 static）时才有效。
