html - Angular:如何在纸牌游戏中重叠输入，具体取决于谁先出牌？

Question

我们目前正在实现纸牌游戏。

按照图片相应的html代码:

<!-- Middle area for played cards. -->
<div *ngIf="this.index < 25" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="-5%" style="width: 50%">
  <div>
    <input class="buttonCards" type="image" src={{playedCardsWithImage[1].imgSrc}} width="50%" height="88%"
           disabled/>
  </div>
  <div fxLayout="column" fxLayoutGap="-100%">
    <input class="buttonCards" type="image" src={{playedCardsWithImage[2].imgSrc}} width="50%" height="88%"
           disabled/>
    <input class="buttonCards" type="image" src={{playedCardsWithImage[0].imgSrc}} width="50%" height="88%"
           disabled/>
  </div>
  <div fxLayout="row" fxLayoutAlign="center end">
    <input class="buttonCards" type="image" src={{playedCardsWithImage[3].imgSrc}} width="50%" height="88%"
           disabled/>
  </div>
</div>

根据哪个玩家先打牌，层的优先级应该改变。这意味着:如果底部玩家先打出他的牌，他的牌应该显示在最底层，而左边玩家的牌应该显示在上面一层，依此类推。

什么是实现它的良好且干净的方法？

Answer 1

您可以使用 CSS z-index 属性，在玩家打牌时增加此值。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index