Html 在flexbox中，将一个放置在另一个之上

我的想法是，当我的布尔变量为

true

时，灰色容器的不透明度与橙色重叠，并且具有更高的

z索引

我不能点击橙色容器内的某些按钮或其他按钮

但是我需要包装上的
flexbox

目前，我的z-index
z-index
的想法失败了，它是连续的flex

如何修复此问题并将灰色置于橙色上方（包括
100%宽度
和包装高度），同时仍使用
flexbox

重要提示：当其重叠时，我无法在橙色容器中单击，看起来它已被禁用

我有以下代码：


angular.module（“myApp”，[]）.controller（“myController”，函数（$scope）{
$scope.isDisabled=true；
});
.wrapper{
显示器：flex；
宽度：100%；
高度：50px；
边框：1px纯红；
z指数：100；
}
.重叠{
宽度：100%；
身高：100%；
背景颜色：灰色；
不透明度：0.5；
z指数：102；
}
.一些内容{
宽度：100%；
身高：100%；
背景颜色：橙色；
z指数：101；
}

我有一些随机内容。。。
要使容器与另一个容器重叠：


只需在父级
中使用
position:relative
。包装器
和
重叠
中使用
position:absolute


要禁用橙色容器，请执行以下操作：


使用链接到布尔变量的
指针事件：无
。（可能是可选的）


angular.module（“myApp”，[]）.controller（“myController”，函数（$scope）{
$scope.isDisabled=true；
$scope.isPointer=true；
});
.wrapper{
显示器：flex；
宽度：100%；
高度：50px；
边框：1px纯红；
位置：相对位置；
}
.重叠{
宽度：100%；
身高：100%；
背景颜色：灰色；
不透明度：0.5；
z指数：1；
位置：绝对位置；
}
.一些内容{
宽度：100%；
身高：100%；
背景颜色：橙色；
}
.指针事件{
指针事件：无
}

我有一些随机内容。。。