Angular：如何在纸牌游戏中重叠输入，这取决于谁先玩纸牌？答案

【问题标题】：Angular: How to overlap input in a card game, depending on who play the card first?Angular：如何在纸牌游戏中重叠输入，这取决于谁先玩纸牌？
【发布时间】：2019-12-18 19:09:39
【问题描述】：

我们目前正在实施一款纸牌游戏。

按照图片对应的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>

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

有什么好的和干净的方法来实现它？

【问题讨论】：

标签： html css angular typescript layer

【解决方案1】：

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

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

【讨论】：