难以堆叠离子卡

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