Javascript CSS溢出对父元素位置的隐藏与可见的奇怪影响

我从未读过任何东西表明元素的溢出属性会对元素定位产生奇怪的影响，我在这里看到：

切换示例中的切换按钮，观察

的背景如何神秘地向上滑动，覆盖以前的内容，而其内容保持在相同的屏幕相对位置（意味着内容相对于其父级背景移动得更低）

这个例子是一个非常简化的版本，我正试图用一个角度组件来扩展它的

——但是这个例子只是CSS和HTML，带有一点JavaScript，没有角度，因为我试图隔离相关的变量

HTML元素的内容可以使用

transform:scale（

小于-1的缩放因子

）

进行缩放，但即使元素的内容被渲染得更小，默认情况下元素的像素尺寸保持不变，内容（除非另有规定）向元素中心收缩，内容周围留下的空白，使元素保持其原始未缩放尺寸

您需要计算与缩放程度匹配的负边距，以便将元素本身视为更小。我已经这样做了，但我发现，除非缩放元素的容器将CSS

溢出设置为
隐藏，否则可能会出现一些奇怪的定位，就好像需要通过负边距删除的额外空白空间仍然有一些部分，难以解释对其他元素总体布局的影响

我在Chrome、Firefox、Safari和Edge中看到了这种行为——所以我猜这是“正确的”CSS行为，但对我来说毫无意义，我希望有人能解释发生了什么。我希望能够将
overflow
设置为
可见
，这样缩放的内容仍然可以执行显示浮动下拉菜单之类的操作，而不会在元素的边界处被剪裁


let hidden=true；
const inner=document.getElementById（'inner'）
函数toggleOverflow（）{
隐藏=！隐藏；
inner.style.overflow=隐藏？“隐藏”：
“可见的”
}
html，正文{
高度：计算（100vh-10em）；
}
.第页{
字体：32px Arial，Helvetica，无衬线；
高度：计算（100%-1米）；
}
.集装箱{
背景色：#ACF；
身高：100%；
}
.外包装{
背景色：rgba（187255 204 0.5）；
字号：2em；
边缘：0 1米；
位置：相对位置；
}
.内包装{
溢出：隐藏；
位置：相对位置；
宽度：适合的内容；
}
.ng内容{
保证金：-18.75px 0；
变换：比例（0.5）；
}
.容器文本{
显示：内联块；
位置：绝对位置；
底部：1米；
}

切换溢出

内容不在列表中

正在缩放的面板及其

包含div，32pt字体

50%的缩放内容在此显示，64磅字体
这是同一分区中的绝对定位跨度
您在.ng内容中设置了负边距。如果overflow设置为hidden，它将隐藏负边距。将边距设置为正数将解决此跳跃问题

.ng content{margin:18.75px 0；}

如果试图上下更改元素的高度，请尝试使用
max height
和
overflow:hidden
。当“最大高度”设置为0时，它将被隐藏。当设置为500px时，您的内容将显示
 跟进

我在我的第一支代码笔上创建了一个变体：


在本例中，我在缩放时使用了
变换原点：上止点
，并将所有需要的负边距放在缩放元素的底部，而不是在顶部和底部之间均匀分割。这消除了奇怪的垂直位置移动

overflow:hidden
仍然需要隐藏过多的背景色，以防止其容器“泄漏”，但在缩放元素背景透明的（常见）情况下，使用
overflow:visible
将不会产生可见效果，而且不用担心缩放元素内部的裁剪下拉菜单

后续行动#2

下面是最好的解决方案，使用
padding:0.05px
来处理@Alochi帮助我理解的真正问题-停止边界塌陷：

来自

建立新块格式上下文的元素（例如浮动和具有“溢出”而非“可见”的元素）的边距不会与其在流中的子元素一起塌陷

因此，添加
溢出：hidden
可以阻止页边距崩溃。
将页边距从负数更改为正数将与我尝试实现的方向完全相反，即缩放内部元素的内容，而不会在缩放内容周围获得大量空白。谢谢！这一信息帮助我找到了另一种防止利润崩溃的方法：使用非常小但非零的填充量。具体来说，
填充：0.05px
。在找到这个建议后，我尝试了更小的东西，0.01px，但这不起作用，所以很明显，在某个点上，非常小的数字有效地四舍五入到零。