Html 当卡片展开时，悬停在最下面一行

我有一堆卡片，点击后，我用描述扩展卡片。问题是，当它展开时，它会向下移动。我需要悬停底部的牌而不移动它。我在沙盒中重新创建了我的问题：

这是设计的结果：

这就是我得到的，当卡片展开时，它会向下移动到最下面一行：

---

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

class:hover{
   position:absolute;
}

---

但您还需要保持相对于父类的位置，以便卡不能移动或抖动。

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

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

您的.expand卡类应为

.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属性位置的更多信息

您的沙盒代码没有显示布局和单击效果？通常，当您希望某些内容停止影响页面其他部分的位置时，您需要

position:absolute

。我做了类似的布局，在每个单元格中添加了一个“liner”元素，然后将其设置为绝对悬停。如果你能修复你的沙盒示例，我可以给你确切的代码。使用位置：绝对感谢你的回答，它工作正常，但有一个问题。所有卡片在左上角展开。检查沙盒，我用你的代码更新了是的，我现在注意到了。但是你可以做的是，在你的卡片上添加一个evelope，然后它就可以工作了。查看工作页面您可以查看更新的代码@这并不能解决所问的问题，也不能解释它所回答的问题。