Css 重用flexbox中具有绝对位置的组件

我简直无法控制自己的位置。在我的应用程序中，我有一些瓦片（或者想想扑克牌）。这些卡片是动态创建的，比如说我想要一个左上角和右下角的数字。我有一些代码，比如

反应码

<div  className='PlayingCard'>
    <span classname='upperNumber'> {number} </span>
    <span classname='LowerNumber'> {number} </span>
<div>

所以问题是绝对值是相对于唯一一个也是绝对值的容器的。将扑克牌设为绝对将使单张牌正确显示。但在我的情况下，这些卡将在一个flexbox中，所以我不能使它成为绝对的。有没有一种方法可以制作一个复杂的组件，它具有内部绝对（或类似绝对）位置，但可以在flexbox中使用，或者以我喜欢的任何其他方式使用

---

目前，我已经将卡片中的数字设置为相对的，但是一些卡片中的项目数量可变，因此无法接受地改变了内容。

您的代码中有很多拼写错误

下面是一个工作示例

其className不是className，缺少结束div标记，lowerNumber className与class（大小写）不同。左属性上也缺少分号

要定位到右下角。使用底部和右侧5px

将相对位置放在播放卡上

      <div className="PlayingCard">
        <span className="upperNumber">{number}</span>
        <span className="lowerNumber">{number}</span>
      </div>

---

这只是一个徒手输入的示例，实际的代码更复杂，所以我们试图强调这个问题。但是你回答我，在父对象上是相对的，这很奇怪，因为这不是一个绝对类型，认为偏移量为0的相对只是正常的定位，然后作为它下面绝对值的参考。我永远也想不到。谢谢

      <div className="PlayingCard">
        <span className="upperNumber">{number}</span>
        <span className="lowerNumber">{number}</span>
      </div>

.PlayingCard {
  position: relative;
  width: 500px;
  height: 100px;
  background: tomato;
}

.upperNumber {
  position: absolute;
  top: 5px;
  left: 5px;
}

.lowerNumber {
  position: absolute;
  right: 5px;
  bottom: 5px;
}