用CSS3 z-index堆叠angular-ui-router ui-view

Question

我想使用CSS3 z-index属性和angular-ui-router堆叠2个ui视图。 我从此链接中汲取了灵感，这是我的实现：

的index.html

<!-- this is the main ui-view -->
<div id="scene" ui-view="general" autoscroll="false"></div>  

index.css

#scene{
    position: absolute;
    width: 800px;
    height: 480px; 
    padding: 0px;
    border: 1px white solid;
}

由于ui-view按添加的顺序堆叠（这不是我想要的配置），因此我定义了另外两个html文件及其对应的CSS，如下所示：

level0.html

<!-- this is the container of the first z-index level -->
<div>
      <ui-view name="z0" class="z0Holder" autoscroll="false"></ui-view>
</div>

level0.css

.z0Holder { 
    background: transparent;
    position: relative;
    width: 800px;
    height: 480px;
    left: 0;
    top: 0;
    z-index: 0!important;
}

level1.html

<!-- this is the container of the second z-index level -->
<div>
   <ui-view name="z5" class="z5Holder" autoscroll="false"></ui-view>
</div>

level1.css

.z5Holder { 
        background: transparent;
        position: relative;
        width: 800px;
        height : 55px;
        left: 0;
        top: 0;
        z-index: 5!important;
    }

我在应用程序的开头从json文件加载路由（工作正常）。 该json文件如下所示：

[
    {
          "name": "zLevel",
          "url": "/zLevel",
          "abstract": true,
          "views": [{
                "name": "general@",
                "templateUrl": "level0.html",
                "controller": "",
                "css": "level0.css"
            },{
                "name": "general@",
                "templateUrl": "level1.html",
                "controller": "",
                "css": "level1.css"         
            }]
    },{
          "name": "confirm",
          "url": "/confirm",
          "parent": "zLevel",
          "views": [{
                "name": "z0@zLevel",
                "templateUrl": "partials/confirmation.html",
                "controller": "confirmationController",
                "css": "stylesheets/confirmation.min.css"
            }]
    },{
          "name": "progressStatus",
          "url": "/progressStatus",
          "parent": "zLevel",
          "views": [{
                "name": "z5@zLevel",
                "templateUrl": "partials/progressStatus.html",
                "controller": "progressStatusController",
                "css": "stylesheets/progressStatus.min.css"     
          }]
    }
]

现在我有两个问题：

• 我只显示了0级模板（确认视图）
• 即使我尝试使用粘性状态（ui路由器附加功能），我也无法同时激活两个状态（progressStatus和确认）

预先感谢您的帮助。