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