Javascript Css模式框z索引不起作用

我试图构建简单的模型，但由于某种原因，

z-index

不起作用。这里有什么问题

document.addEventListener（“DOMContentLoaded”，function（））{
var aTag=document.querySelector（'.img-box'）；
aTag.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
document.body.classList.add（'overlay'）；
var img=document.createElement（'img'），
modalBox=document.getElementById（'modal-box'）
img.src=this.href；
modalBox.appendChild（img）；
})
});
.overlay{
位置：固定；
排名：0；
左：0；
背景：#000；
不透明度：0.4；
宽度：100%；
身高：100%；
}
#模态盒{
z指数：1；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#模态盒img{
最大宽度：100%；
}

您只需在#模式框中将位置更改为相对而不是绝对，它就会起作用
问题在于您将
.overlay
类添加到文档正文中。其余内容保存在文档体中，因此它位于顶部。创建一个新的overlay div并将其添加到主体中，然后对其应用
.overlay
类

下面是一个工作示例：
您正在将
.overlay
类应用于主体。这不会像您期望的那样在内容上方创建覆盖。您需要创建另一个元素

应该做你想做的。
我设置了绝对位置，因为我想将模式框居中。是的，只需将其放在相对位置，然后添加边距：0px自动
z索引
与
位置：绝对
配合即可。。。这不是问题所在，有一种方法可以将其添加到body标签中而不会产生这种效果？那么，body中包含的所有元素都将保持在顶部。你不能把容器放在身体外面。