弹出式div而不调整父级

Question

我有以下代码：

＆＃13;

＆＃13;

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如你所看到的，当我点击绿色div时，我想在输入和绿色div下方弹出另一个div。目前这是有效的，但它也调整了父div（灰色）的大小。如果不调整父级的大小，我可以将其叠加在一起：

我尝试使用z-index，但它不起作用。有什么想法吗？

谢谢和欢呼。

Answer 1

将top和.popup添加到angular.module("myApp", []).controller("myController", function($scope) { $scope.isShown = false; $scope.togglePopup = function() { $scope.isShown = !$scope.isShown; } });：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;