Html 如何防止滚动条出现在模式背景之上

我在一个相对定位的元素中放置了一个固定位置的模式，没有变换，并且有溢出：auto

问题是，当父级上出现溢出时，模态的背景不会覆盖滚动条-请查看所附图片以获取示例

滚动条也应该被半透明的黑色背景覆盖，但由于某些原因，它不是。有人知道为什么，和/或我如何着手解决这个问题吗

我希望避免对模态容器使用绝对定位，因为它可以是任意层次结构中的嵌套元素

下面是我的.modal容器类的css，其中包括背景

.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}

---

我已经修复了这个错误。这是因为我在变形元素中有一个固定位置的容器，这给了它一个新的视角。我必须将同级元素中的元素呈现给其父元素，或者从父元素中删除转换样式以进行修复。