html - 当div在屏幕上高于父div时被切断

This codepen演示了此问题。请注意，红色方块.popup在顶部被切除。

它的祖父母div #hideExtraWidth的顶部被砍掉了。

由于我实际的实现（JS更改#wide div以创建轮播效果），我需要隐藏额外的宽度（overflow-x），但它似乎也隐藏了额外的高度（overflow-y） ...即使我有这个：

overflow-x: hidden;
overflow-y: visible;

如果您同时去除了两个溢出属性，则会看到它修复了被切碎的顶部，但由于现在已经可见，因此可以解决宽度溢出的问题。

在隐藏水平溢出的同时，如何防止被切碎的.popup顶部？

最佳答案

可悲的是，“ ‘visible’ becomes ‘auto’ also when combined with ‘hidden’”。您的示例的解决方法：通过更改padding: 30px→padding: 130px使容器足够大以容纳溢出，然后使用margin-top: -100px将其移回原位。 Sample。