Html 在同一个div中是否可能有不同的z索引？

我试着把同一篇文章写两遍，一篇比另一篇高。此文本被图像剪切

这些文本位于居中的同一div中，但它们的z索引保持不变

我试图更改元素的任何z索引

.bottom{
字体系列：高谭；
字体风格：普通；
字号：900；
字体大小：144px；
颜色：#ededed；
位置：绝对位置；
}
.起来{
字体系列：高谭；
字体风格：普通；
字号：900；
字体大小：144px；
颜色：透明；
-webkit文本笔划：#ededed 2px；
z指数：2；
位置：绝对位置；
}
.组{
位置：相对位置；
宽度：465.125px；
高度：144px；
左：50%；
右：50%；
转换：翻译（-50%，-50%）；
利润率最高：30%；
z指数：1；
}

扎乌斯

扎乌斯

我对z-index不太了解，但如果我的理解正确的话，从.up中删除z-index并将位置更改为相对位置是可行的

.bottom{
字体系列：高谭；
字体风格：普通；
字号：900；
字体大小：144px；
颜色：#ededed；
位置：绝对位置；
}
.起来{
字体系列：高谭；
字体风格：普通；
字号：900；
字体大小：144px；
颜色：透明；
-webkit文本笔划：#ededed 2px；
位置：相对位置；
}
.组{
位置：相对位置；
宽度：465.125px；
高度：144px；
左：50%；
右：50%；
转换：翻译（-50%，-50%）；
利润率最高：30%；
z指数：1；
}

扎乌斯

扎乌斯

我看不出有什么问题，只需为冲程元素指定一个更高的

z-index

。也可能你会因为文字的颜色和笔划是一样的而感到困惑。我试着演示它。

实现目标根本不需要

z-index

属性，如下面的示例所示

此外，应尽可能省略

z-index

，以保持代码干净、可重用、可维护和可扩展。
当然，在真正的小项目中，它没有在大项目中那么重要

#帧{
位置：相对位置；
宽度：100%；
身高：100%；
}
.组{
位置：绝对位置；
宽度：400px；
高度：250px；
左：10%；
最高：30%；
}
.集团img{
位置：绝对位置；
排名：0；
左：70%；
}
.大字{
字体系列：高谭；
字体风格：普通；
字号：900；
字体大小：144px；
位置：绝对位置；
排名：0；
左：0；
}
.底部{
颜色：#ededed；
}
.起来{
颜色：透明；
-webkit文本笔划：#ededed 2px；
}

洛勒姆
洛勒姆

是的，也可以为“.bottom”提供z索引。是不是1你说的“这篇文章被一张图片剪切了”是什么意思？在DOM中该图像将显示在哪里？在

div.group

或其他元素中？您希望图像介于填充文本和笔划文本之间吗？在这种情况下，填充文本的作用是什么？图片是半透明的吗？这是我在图片上遇到的问题：为底部提供z索引。不会改变任何东西。感谢您的帮助！不幸的是，它不起作用。填充在笔划下。这里是一些我得到的和我应该得到的截图：如果你想要，我可以尝试创建一个代码笔！我看了你的图片，你应该创建一个代码笔。同样从快照中，我看到图片不是文本的兄弟，您是否尝试将图像作为您尝试堆叠的两个元素的同级？特别是因为z索引倾向于分组并限制为父级或祖先级的z索引，而父级或祖先级的z索引是第一个符合z索引条件的索引。有代码笔：它可以工作，但图像大小很难恢复