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

使容器覆盖另一个容器：

只需使用position:relative中的.wrapper和position:absolute

overlapped

要禁用橙色容器：

使用链接到您的布尔变量的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>

在flexbox中将一个放在另一个上面

1 个答案: