html - 当卡片展开悬停底行时

Question

我有一堆卡片，单击时，我正在扩展带有描述的卡片。问题是，当它展开时，它会向下移动 bottom row。我需要悬停底部的卡片而不移动它。我在沙箱中重新创建了我的问题: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 属性的位置