当卡片展开时悬停在底行答案

【问题标题】：When cards expand hover bottom row当卡片展开时悬停在底行
【发布时间】：2019-08-29 06:09:06
【问题描述】：

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

这里应该是如何设计的：

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

【问题讨论】：

你的沙盒代码没有显示布局和点击效果？一般来说，当您希望某些内容不再影响页面其他部分的位置时，您需要position: absolute。我通过在每个单元格内添加一个“衬里”元素，然后在悬停时将其设置为绝对值，做出了类似的布局。如果你能修复你的沙盒示例，我可以给你确切的代码。
使用位置：绝对

标签： html css

【解决方案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 属性位置的信息

【讨论】：

感谢您的回答它工作正常，但有一个问题。所有卡片在左上角展开。检查沙箱，我用你的代码更新了
是的，我现在注意到了。但是你可以做的是，在你的卡片上添加一个信封，然后它就可以工作了。查看工作页面sbv70.csb.app
可以查看更新代码@codesandbox.io/embed/upbeat-lehmann-sbv70

【解决方案2】：

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

class:hover{
   position:absolute;
}

但你也需要保持相对于父类的位置，这样卡片就不能移动或晃动。

【讨论】：

这不能解决所提出的问题，也不能解释它正在回答的问题。