当卡片展开时，悬停底行

Question

我有一堆卡片，点击后，我正在扩展带有说明的卡片。问题是，当它扩展时，它会向下移动到下一行。我需要悬停底部的卡片而不移动它。我在沙箱中重新创建了问题：https://codesandbox.io/s/withered-star-cov3x

在设计上应该是这样：

这就是我得到的，当卡扩展时，它向下移动到底行：

Answer 1

只需在您的.expand-card类中添加这三个属性，

 position: absolute;
    z-index: 20;
    background: white;

您的.expand-card类应为

.expand-card {
    position: absolute;
    z-index: 20;
    background: white;
    padding: 30px 40px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.27);
}

然后它将正常工作。

您可以在CSS属性位置上进行更多的探索

Answer 2

在悬停CSS上，您需要使用位置属性。 示例：

Out[2]: 
  keys variable  value
0    A        A      1
3    A        A      4
5    B        B      6
6    B        B      7

但是您还需要相对于父类保持位置，以使卡不会移动或晃动。