Html z索引在flex容器中不起作用

我已经创建了一个包含3个flex项的flex容器

第一个flex项包含两个类（

.flex项

和

.overlay

）

我想在flex项目上覆盖图像。我尝试添加

z-index

和position，但它不起作用

.flex容器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
}
.弹性项目{
右边距：50px；
边缘底部：50px；
弹性：0.15em；
边框：2倍纯红；
高度：100px；
}
.覆盖{
背景：url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg)无重复中心；
背景尺寸：100px 80px；
z指数：110；
位置：相对位置；
不透明度：0.6；/*真实浏览器*/
过滤器：alpha（不透明度=60）；/*MSIE*/
高度：170px；
}

形象
在
中使用
位置：绝对
非
相对
。叠加
您的支票是背景，房子是内容，因此背景不能高于内容。将检查移动到另一个元素


.flex容器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
}
.弹性项目{
右边距：50px；
边缘底部：50px；
弹性：0.15em；
边框：2倍纯红；
高度：100px；
}
.覆盖：之前{
背景：url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg)无重复中心；
背景尺寸：100px 80px；
z指数：110；
位置：绝对位置；
不透明度：0.6；/*真实浏览器*/
过滤器：alpha（不透明度=60）；/*MSIE*/
高度：170px；
宽度：170px；
显示：块；
内容：''；
}

形象

.container{
位置：相对位置；
宽度：50%；
} 
.image{
显示：块；
宽度：100%；
高度：自动；
} 
.overlay{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.container:hover.overlay{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}
在CSS中，
.overlay
类在父元素上建立背景图像

在HTML中，
img
元素将图像放置为
.overlay
父对象的子对象

根据的规则，子级不能出现在父级后面。因此，背景图像（父对象）不能出现在
img
（子对象）前面

这就是为什么你的
img
总是在前面，而不管
z-index

但这个问题有一个简单的解决办法。使用绝对定位的伪元素：


.flex容器{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
}
.弹性项目{
右边距：50px；
边缘底部：50px；
弹性：0.15em；
边框：2倍纯红；
最小高度：100px；
显示器：flex；
弯曲方向：立柱；
位置：相对位置；
}
img{
宽度：100%；
最小高度：0；/*https://stackoverflow.com/q/36247140/3597276 */
}
.overlay：：之后{
背景：url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg)无重复中心；
宽度：100%；
身高：100%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
背景尺寸：包含；
不透明度：0.6；
内容：“；
}

你是说类似的东西吗？