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

Question

我的想法是，当我的布尔变量是 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>

Answer 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>

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

div one above the other in flexbox

html

css

z-index

flexbox

angularjs