绝对位置打破我的布局

Question

我试图使用ngAnimate为我的视图创建过渡，但是我发现它需要视图将position属性设置为绝对才能重叠，我的问题是当我应用这个位置时绝对，布局会失去宽度和高度。

在这里看看它的默认位置是什么样的（是的，他们是西班牙语，对不起）：

以及绝对位置看起来如何：

代码如下：

索引

<div class="col-md-6 col-md-offset-1 col-sm-8 col-sm-offset-2 col-xs-12">
    <div class="slideLeft" ng-view></div>
</div>

视图

<div class="panel panel-primary">
<div class="panel-heading">
    <label class="fixcolor"><strong>Agregar nuevo registro</strong></label>
</div>
<div class="panel-body">
    <!-- it loses the layout here when loading with ng-include -->
    <div ng-switch="currentStep">
        <div ng-switch-when="1">
            <div class="slideLeft" ng-include="'ViewsAngular/NuevoProducto/paso1.html'">
            </div>
        </div>
        <div ng-switch-when="2">
            <div class="slideLeft" ng-include="'ViewsAngular/NuevoProducto/paso2.html'">
            </div>
        </div>
        <div ng-switch-when="3">
            <div class="slideLeft" ng-include="'ViewsAngular/NuevoProducto/paso3.html'">
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

css

.slideLeft{
position:absolute;
}

.slideLeft.ng-leave        {
    -webkit-animation:slideLeftLeave 1s ease-in;
    -moz-animation:slideLeftLeave 1s ease-in;
    animation:slideLeftLeave 1s ease-in;   
}
.slideLeft.ng-enter         {  
    -webkit-animation:slideLeftEnter 1s ease-in;
    -moz-animation:slideLeftEnter 1s ease-in;
    animation:slideLeftEnter 1s ease-in;    
}

@-webkit-keyframes slideLeftLeave {
    from { left: 0 }
    to { left: -100% }
}
@-moz-keyframes slideLeftLeave {
    from { left: 0 }
    to { left: -100% }
}
@keyframes slideLeftLeave {
    from { left: 0 }
    to { left: -100% }
}

@-webkit-keyframes slideLeftEnter {
    from { left: -100% }
    to { left: 0 }
}
@-moz-keyframes slideLeftEnter {
    from { left: -100% }
    to { left: 0 }
}
@keyframes slideLeftEnter {
    from { left: -100% }
    to { left: 0 }
}

我认为这与使用位置绝对时不使用动态内容扩展的div有关，但是如何在不使用绝对位置的情况下执行此重叠行为？