Html 如何防止动态布局中的块跳起来

我需要修正当改变前一个块的高度也改变下一个块的位置时的行为

在我的示例中，当第二行的第一个元素处于“悬停”状态时，红色块（

.jumper

）向上跳跃。但我需要红砖在它的位置上站住。就像在第二行中添加了一个元素一样

怎么做

---

为什么在第二种情况下，容器的高度（

main

）没有改变？

这是因为悬停时添加了-20%的余量。如果您想要相同的内容，请添加另一张图片，在文本div上添加20%的边距，或者使用最佳解决方案：

将悬停中的

margin:020%0

更改为

padding

，使用相同的值

啊，找到了！：）

只需对代码进行以下更改：

.zaglushka table {
  position: absolute;
  top: 100%;
  display: none;
}

.zaglushka:hover {
  z-index: 10;
  transform: scale(1.2);
}

我知道

scale

转换有一些奇怪的地方导致内容位移，这是因为表被显示/隐藏了

---

我认为这个解决方案应该做到这一点。

问题在于悬停时应用的这种样式

margin:0 0-20%0因为您将项目的大小增加了20%而应用。问题是保证金的百分比是相对于项目父项的，而不是项目本身的。如果同一行上有多个项目，则不会出现此问题，因为其他项目保持其父项高度稳定。是否有方法强制父项高度稳定？类似于添加空的最后一个元素（
可见性：hidden
），但更好。填充更改行的高度。他们开始跳跃。我需要顶行和底行重叠。好的。但是
表格
不应该是
绝对的
，因为我不想从父图形上下文（边框、边距、填充）中取出它。