Html 以嵌套的角度方式排列div

在我的angular项目中，我希望以以下方式显示div：

我的HTML如下所示：

<div class="outer-wrapper">
    <div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
        <img src="{{image.path}}">
    </div>
</div>

<div class="inner-wrapper">
    <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
    </div>
</div>

这给了我如下结果：

<div class="outer-wrapper">
    <div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
        <img src="{{image.path}}">
    </div>
</div>

<div class="inner-wrapper">
    <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
    </div>
</div>

我应该如何修改html/css以将这些图像排列在角落？此外，这些部门还需要作出反应

我希望此示例可以帮助您[全屏打开]

var-app=angular.module（“app”，[]）；
应用程序控制器（“ctrl”，函数（$scope）{
$scope.box=[
{颜色：“绿色”}，
{颜色：“红色”}，
{颜色：“蓝色”}，
{颜色：“黄色”}
];
$scope.images=[
{路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWOMAATUHW“}，
{路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWOMAATUHW“}，
{路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWOMAATUHW“}，
{路径：https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWOMAATUHW“}
];
});
.holder{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.内包装{
高度：200px；
宽度：200px；
背景色：#9e9e9e；
填充：10px；
位置：相对位置；
}
.内包装盒{
宽度：45%；
身高：45%；
显示：内联块；
填充：0；
利润率：0.5px16px；
}
.内包装.盒子.红色{
背景色：红色；
}
.内包装.盒子.黄色{
背景颜色：黄色；
}
.内包装.盒子.蓝色{
背景颜色：蓝色；
}
.内包装.盒子.绿色{
背景颜色：绿色；
}
.内包装.外包装.图像{
宽度：100px；
高度：100px；
位置：绝对位置；
保证金：0；
}
.inner-wrapper.outer-wrapper.image:第n个子项（1）{
顶部：-120px；
左：-100px；
}
.内包装.外包装.图像：第n个子（2）{
顶部：-120px；
右：-100px；
}
.内包装.外包装.图像：第n个子（3）{
底部：-120px；
右：-100px；
}
.内包装.外包装.图像：第n个子（4）{
底部：-120px；
左：-100px；
}
.内包装.外包装.图像img{
宽度：100%；
边框：实心1px#ccc；
}
感谢您给出这个令人惊讶的答案！