彈出DIV

Question

我有如下代碼：

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.isShown = false; 
 

 
    $scope.togglePopup = function() { 
 
    $scope.isShown = !$scope.isShown; 
 
    } 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    background-color: grey; 
 
} 
 
.inputAddon { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
input { 
 
    width: 75px; 
 
    height: 19px; 
 
} 
 
.addon { 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: green; 
 
} 
 
.popup { 
 
    width: 200px; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    background-color: white; 
 
    z-index: 1000; 
 
}

<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 class="inputAddon"> 
 
    <input type="number"> 
 
    <div class="addon" ng-click="togglePopup()"></div> 
 
    </div> 
 
    <div class="popup" ng-if="isShown"></div> 
 
</div>

正如你可以看到，當我點擊綠色的div，我想下面彈出另一個DIV輸入和綠色div。目前這個工作，但它也調整了父div（灰色）。誰，我可以疊加像這樣不調整父：

我嘗試了與z-index，但它不工作。有任何想法嗎？

謝謝和歡呼。

Answer 1

添加position: absolute和top到.popup：

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.isShown = false; 
 

 
    $scope.togglePopup = function() { 
 
    $scope.isShown = !$scope.isShown; 
 
    } 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    background-color: grey; 
 
} 
 
.inputAddon { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
input { 
 
    width: 75px; 
 
    height: 19px; 
 
} 
 
.addon { 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: green; 
 
} 
 
.popup { 
 
    width: 200px; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    background-color: white; 
 
    z-index: 1000; 
 
    top: 32px; 
 
    position: absolute; 
 
}

<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 class="inputAddon"> 
 
    <input type="number"> 
 
    <div class="addon" ng-click="togglePopup()"></div> 
 
    </div> 
 
    <div class="popup" ng-if="isShown"></div> 
 
</div>