div在flexbox中一个在另一个之上答案

【问题标题】：div one above the other in flexboxdiv在flexbox中一个在另一个之上
【发布时间】：2016-11-02 17:31:35
【问题描述】：

我的想法是，当我的布尔变量为 true 时，具有不透明度的灰色容器与橙色重叠且具有更高的 z-index。

我无法点击橙色容器内的某些按钮。

但我需要包装上的flexbox。

目前，我对z-index 的想法失败了，它是连续灵活的。

我该如何解决这个问题并将灰色放在橙色上方（100% width 和包装器的高处）并仍然使用flexbox。

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

我有以下代码：

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.isDisabled = true;
});

.wrapper {
  display: flex;
  width: 100%;
  height: 50px;
  border: 1px solid red;
  z-index: 100;
}
.overlapped {
  width: 100%;
  height: 100%;
  background-color: grey;
  opacity: 0.5;
  z-index: 102;
}
.someContent {
  width: 100%;
  height: 100%;
  background-color: orange;
  z-index: 101;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController" class="wrapper">
  <div ng-if="isDisabled" class="overlapped"></div>
  <div class="someContent">I have some random content...</div>
</div>

【问题讨论】：

标签： html angularjs css flexbox z-index

【解决方案1】：

使容器覆盖另一个：

只需在父级.wrapper 中使用position:relative，在overlapped 中使用position:absolute

要禁用橙色容器：

使用链接到您的布尔变量的pointer-events:none。（可能是可选的）

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.isDisabled = true;
  $scope.isPointer = true;
});

.wrapper {
  display: flex;
  width: 100%;
  height: 50px;
  border: 1px solid red;
  position: relative;
}
.overlapped {
  width: 100%;
  height: 100%;
  background-color: grey;
  opacity: 0.5;
  z-index: 1;
  position: absolute;
}
.someContent {
  width: 100%;
  height: 100%;
  background-color: orange;
}
.pointer-events {
  pointer-events: none
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController" class="wrapper">
  <div ng-if="isDisabled" class="overlapped"></div>
  <div ng-if="isPointer" class="someContent pointer-events">I have some random content...</div>
</div>

【讨论】：