html - 麻烦堆叠 ionic 卡

Question

我正在尝试让 ionic 卡片在我的网站上轮换。我需要它们垂直堆叠，但我无法让它们堆叠，除非卡片的正面和背面也堆叠起来，这在垂直卡片之间留有很大的余量。

Codepen 卡片重叠而不是相对于前一张卡片底部堆叠 https://codepen.io/Froelund/pen/gppBvX

AngularJS:

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {})
.directive('flipContainer', function() {
    return {
        restrict: 'C',
        link: function($scope, $elem, $attrs) {
            $scope.flip = function() {
                $elem.toggleClass('flip');
            }
        }
    };
 });

Answer 1

将前面设为相对，将后面设为绝对，现在我得到了想要的效果。

.front {
  position: relative;
}

.back {
  position: absolue;
}