如何根据元素底部坐标而不是顶部将元素定位

Question

我正在使用React制作一个扑克桌。现在我有玩家组件，需要在桌子周围定位。

我遇到的问题是，当屏幕属性改变时，播放器框会发生变化，这正是我想要的，但是前两个框的位置锚定在顶部，这导致玩家离开了桌子。我更愿意将锚点放在底部，这样他们就会留在桌子旁边。

- user8210822

Answer 1

默认情况下，原点始终位于元素的左上角。如果您希望将其锚定在左下角，则始终需要添加元素的高度以实现所需的结果。

elem.X = X;
elem.Y = Y + elem.height;

希望能够帮助。

- masterpreenz

Answer 2

如果您在此处使用绝对定位，可以执行以下操作：

.player {
    top: 200px; /* whatever value you want the bottom of element to be from top */
    margin-top: -100%; /* bring the element back up so the bottom is where the top value set above is */
}

话虽如此，我建议在这里使用类似CSS表格或Flexbox的东西。

- fredrivett

---

我需要能够将筹码、锅和赌注层叠在桌子图像上，并在屏幕大小改变时使所有内容自适应。如果我使用CSS表格或flexbox，这是否可能？ - user8210822

棘手的部分在于如何将任何东西放在桌子的弯曲角落上。如果你只想把东西放在人们面前，flexbox或CSS表格可以做到这一点。它有效地将表格分成网格。但是，如果您不想要网格样式布局，并希望更自由地移动物品，则可能不适合您。 - fredrivett