E2编辑器里的零高容器是什么？怎么用？

一、零高容器是什么？（核心概念）

"零高容器"是E2.COOL黑科技SVG编辑器中最核心、最基础的高级组件之一 。你可以把它想象成一个高度为零的透明盒子。

技术原理（一句话版） ：

它是一个CSS结构中 height: 0 的元素，但由于设置了 overflow: visible 属性，它里面的内容可以溢出并可见。

通俗理解（大白话版） ：

就像一个隐形的小托盘。它自身不占任何页面空间（高度为0），但你可以把各种图片、按钮、动画等素材放在这个托盘上，这些素材可以自由"浮"在页面上，与下面的其他内容重叠，实现无限叠加的效果。

发明来源 ：

根据学术参考资料，零高结构最初由山东大学SVG交互设计学沈佳麒发明。

---

二、零高容器能做什么？

它是几乎所有复杂SVG交互效果的"地基"。主要功能包括：

1. 实现图层无限堆叠：这是它最核心的用法。你可以把多个零高容器叠在一起，每个容器里放不同的图片或组件，它们就会在同一屏幕位置重叠，形成类似Photoshop图层的效果。GQ实验室等多个品牌案例都基于此原理实现。

2. 辅助伸长动画：许多复杂的伸长（展开）动画，都是先通过零高容器将多个交互模型在同一区域内重合，然后再触发伸长，实现丝滑的连续点击切换效果。

3. 实现错层/穿透效果：配合其他组件，可以实现复杂的视觉穿插（错层滑动）。

---

三、零高容器的三大核心用法（案例解析）

用法一：伪无限连续点击切换（白天↔黑夜模式）

效果：点击画面，内容消失，下层内容进场，如此反复，实现无限次切换。

操作步骤（参考《从白天→到黑夜》教程）：

1. 搭建框架：在「高级组件」中拖入「零高容器」和「占位」组件。
2. 设置高度：在「占位」中填写素材的总高度（宽高），例如750×3100，这个占位决定了整个交互结构的固定总高度。
3. 填充内容：在「零高容器」中不断拖入「坍塌盒子」组件。
4. 配置切换：在「坍塌盒子」的嵌套区中，分别放置"白天模式"和"黑夜模式"的素材。用户点击时，当前模式坍塌消失，下一层模式出现。
5. 收尾：在最后拖入「置顶框架」组件，防止最后一次点击后内容消失。

原理：零高容器本身不占高度，但通过占位组件固定了总高度，使得内部可以无限叠加不同模式的坍塌盒子。

用法二：复合动画接伸长（连续点击/翻页后展开）

效果：用户连续点击画面进行多步交互（如渐隐、放大消失、翻页等）后，最后自动伸长展示完整内容。

操作步骤（参考《解放想象力：SVG任意动画接伸长》教程）：

1. 选择框架：在「伸长动画」中选择「任意动画接伸长」组件，上传"结束图层"。
2. 搭建动画区 ：在框架的"任意动画嵌套区域"中，拖入「零高容器」。
3. 堆叠交互：通过「自定义参数」功能，将零高容器的上边距设为0。然后在这个零高容器内，依次拖入多个交互组件（如「单图渐隐」、「任意点放大-消失」等）。
4. 重复堆叠 ：为了实现连续点击，重复拖入多个零高容器，每个容器内放不同的交互组件。越靠前的图层顺序越靠下。
5. 配置伸长：在框架的"伸长组件嵌套区"搭建展开内容，并调整伸长的最终高度。

原理：通过多个零高容器的叠加，将多个交互模型在同一区域内重合，实现了"连续点击"的效果，最后再统一展开伸长内容。

用法三：差速轮播/悬浮表层

效果：利用零高容器叠加两个滚动广告组件，使它们以不同速度滚动，形成前后画面的差速移动效果。

操作步骤（参考《双层差速轮播（DIY）》教程）：

1. 叠加组件 ：拖入一个「零高容器」，然后在其内部放入两个「滚动广告」组件。

2. 设置差速 ：在第二个「滚动广告」组件的自定义参数中，输入正/负延迟量（如-0.5）。正代表延迟开始，负代表提前开始。

3. 悬浮表层 ：同理，可以在零高容器中叠加「穿透图片」作为浮层，固定在滚动广告之上。

   

原理：零高容器让两个滚动广告在视觉上重叠，通过设置不同的延迟参数，实现前后画面的异步运动。

---

四、零高容器的其他变体与注意事项

常见变体

在E2.COOL编辑器中，你可以通过筛选器切换零高容器的不同模式：

• 零高容器（穿透）：默认模式。

• 零高容器（穿透+强制优先级） ：常用于需要覆盖所有其他元素的场景，如游戏类交互、弹窗等。

  

• 零高容器（3D）：在3D视差滑动等场景中使用。

关键注意事项

1. 素材尺寸必须统一 ：在同一组零高容器叠加结构中，所有图片的尺寸（宽高像素）必须完全一致，否则会出现错位、闪烁等问题。
2. 注意顺序 ：越先 放到操作区的结构，在页面中实际处于越靠下（即越底层）的位置。越后放的越靠上（顶层）。
3. 必须真机测试 ：所有教程都强调：务必将图文导入微信公众后台，用手机预览测试，因为电脑预览无法完全模拟真实环境下的渲染效果。
4. 任何会员均可使用：零高容器是E2编辑器中基础但强大的组件，任何等级的编辑器会员均可使用。

总结

核心特点	用法场景	关键组件搭配
高度为0，内容可溢出	图层无限堆叠	坍塌盒子、各种连续点击组件
同屏重叠不同结构	复合动画接伸长	任意动画接伸长、单图系列组件
可叠加多个相同组件	差速轮播、悬浮表层	滚动广告、穿透图片

一句话总结 ：零高容器是所有复杂SVG交互的"万能地基"，它让你可以在同一屏幕位置，自由地叠加任意数量的交互组件，从而创造出几乎无限的创意效果。