伪元素实现文字渐变加阴影时，祖父背景遮挡伪元素的情况？-灵析社区

伪元素实现文字渐变加阴影时，祖父背景遮挡伪元素的情况 一般实现文字渐变加阴影，就是使用伪元素绝对定位实现。下面的代码能够实现效果。 .header { width: 100%; height: 100px; } .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; } .text::before { content: attr(data-text); position: absolute; color: transparent; text-shadow: 0 4px 2px blue; z-index: -1; } 测试测试 效果 但在需求中，header也有一个背景，当我为header（也就是伪元素的祖父）加上背景时，伪元素被覆盖了  后续解决办法是为header加上相对定位和z-index:但却跟z-index取值无关，z-index从-999到999效果都是不变的。  最开始的猜测：怀疑祖父背景遮盖伪元素，为此我去MDN看了一下z-index的解释，层叠上下文中子元素不会跟外部元素进行层级比较，而是和父元素作为整体参与外层层叠上下文啊。 后来发现：祖父z-index的取值并不影响效果，确实符合“层叠上下文中子元素不会跟外部元素进行层级比较”。 没明白这里祖父背景和伪元素的关系