麻烦堆叠离子卡

Question

我正在尝试在我的网站上旋转离子卡。我需要它们垂直堆叠但我不能让它们堆叠，除非卡片的正面和背面也堆叠，这在垂直卡片之间留下了很大的余量。

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