Javascript AngularJS-在另一个图像上显示图像

如果我的密码乱七八糟，我很抱歉。我正试图在另一张图片的上方用Ionic AngularJS显示图片。基本上，当用户单击“应用”按钮时，它将在图像“PathFindingMap.png”的顶部显示图像“toilet.png”

在my navigation.html中，我有以下代码段：

    <button ng-click="apply()" type="button">Apply</button>
     <div style="width: 627px; height:975px; background-image: url('img/PathFindingMap.png'); background-repeat: no-repeat; background-size:cover;">

     </div>
     <div ng-style="navigationStyleToilet[$index]" ng-repeat="o in arr"></div>

 .controller('NavigationCtrl', function ($scope, NavigationService) {
$scope.myCategory = {}
$scope.apply = function () {
    $scope.arr = [];
    var strCategoryName = "Washroom";
     categoryInfo = NavigationService.fnGetCategoryInfo(strCategoryName);
    $scope.navigationStyleToilet = [];
    for (i = 0; i < categoryInfo.length; i++)
    {
        $scope.arr.push(i);
        var targetImageX = categoryInfo[i].X;
        var targetImageY = categoryInfo[i].Y;
        $scope.navigationStyleToilet[i] = {
            "z-index":"1",
            "position":"absolute",
            "width": "100px",
            "height": "100px",
            "top": targetImageY,
            "left":targetImageX,
            "background": "url('img/toilet.png')",
            "background-repeat": "no-repeat",     
      }
    }
}
})

 .factory('NavigationService', function () {
 var ToiletCoordinates = new Array();
ToiletCoordinates[0] = { X: 16, Y: 100 };
 return {
        fnGetCategoryInfo: function (strCategoryName) {
            if (strCategoryName == "All Booth") {

            }
            else if (strCategoryName == "Washroom") {
                return ToiletCoordinates;
            }

        }
    }
  })

---

不幸的是，“toilet.png”图像总是显示在“PathFindingMap.png”的下方，而不管“toilet.png”的X和Y坐标如何。我已经尝试了很多方法，但仍然无法在“PathFindingMap.png”的顶部显示“toiler.png”。我的代码似乎有问题。有人能告诉我一个方法让它工作吗？谢谢

你可以在CSS的帮助下完成。要在单击按钮时将图像添加到另一个图像的顶部，可以使用ng类属性

var-app=angular.module（“ap”，[]）；
应用控制器（“con”，功能（$scope）{
$scope.class=“imgagonbotm”；
$scope.changeClass=函数（）{
如果（$scope.class==“imageOnBottom”）$scope.class=“imageOnTop”；
else$scope.class=“imageOnBottom”；
};
});
.container{
位置：相对位置；
}
.imageOnTop{
位置：绝对位置；
宽度：100px；
高度：100px；
边框：1px纯红；
}
.imageOnBottom{
/*你想要什么都行*/
}

换班
您是否尝试过更改z索引？在顶部添加div，并使用ng show/ng hideca动态绑定图像可以在代码中添加JSFIDLE？imageOnTop和imageOnBottom是什么？我不明白ImageOnTop和imageOnBottom是样式类名